@metamask/design-system-twrnc-preset
Version:
47 lines • 1.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTailwind = exports.useTheme = void 0;
const react_1 = require("react");
const ThemeContext_1 = require("./ThemeContext.cjs");
/**
* Hook that provides access to the current theme.
* Use this when you need to conditionally render content based on theme.
*
* @returns The current theme ('light' or 'dark')
*
* @example
* const theme = useTheme();
* const inverseTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
* return (
* <ThemeProvider theme={inverseTheme}>
* <View style={tw`bg-default`}>
* <Text style={tw`text-default`}>Toast message</Text>
* </View>
* </ThemeProvider>
* );
*/
const useTheme = () => {
const { theme } = (0, react_1.useContext)(ThemeContext_1.ThemeContext);
return theme;
};
exports.useTheme = useTheme;
/**
* Hook that provides access to the tailwind utility function.
* Use this when you only need styling capabilities.
*
* @returns Tailwind utility function for styling
*
* @example
* const tw = useTailwind();
* return (
* <View style={tw`p-4 bg-primary`}>
* <Text>Styled content</Text>
* </View>
* );
*/
const useTailwind = () => {
const { tw } = (0, react_1.useContext)(ThemeContext_1.ThemeContext);
return tw;
};
exports.useTailwind = useTailwind;
//# sourceMappingURL=hooks.cjs.map