I have a colors.ts file:
export const black = '#0C0C0C';
export const blue = '#22618E';
and when ever I want to import a specific color I import it like:
import {black} from 'Shared';
In my Shared folder I have an index.ts that exports the colors:
export * from './colors';
Now I want to be able to export and Import the same way when using a theme.
Example
colors.ts:
const DefaultTheme = {
black: '#0C0C0C',
blue: '#22618E',
}
const SpecialTheme= {
black: 'red',
blue: 'yellow',
}
export const ColorsBytheme = () => {
const context = myContext();
return context.Default? DefaultTheme :SpecialTheme;
}
Problem:
I can not deconstruct/import the properties directly, this gives me undefined:
import {black} from 'Shared';
How can I accomplish this?
EDIT:
I have also tried by using a self invoking function when exporting:
const ColorsBytheme = () => {
return DefaultTheme;
};
export default ColorsBytheme();
When I import
import { black } from 'Shared';
It is still undefined
Based on your code example, you are currently exporting ColorsBytheme as a function that generates/returns the theme object...therefore, your import/deconstruction would need to look something along the lines of:
import { ColorsBytheme } from "Shared"
const { black } = ColorsBytheme();
Another option if you wish to have a single line would be to use require instead of import:
const { black } = require("Shared").ColorsBytheme()
Variables that are imported are just that, static variables. Functions are not evaluated when they are imported, therefore, in order for the values to be dynamic, the function needs to be executed.