@metamask/design-system-twrnc-preset
Version:
42 lines • 1.15 kB
JavaScript
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext.mjs";
/**
* 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>
* );
*/
export const useTheme = () => {
const { theme } = useContext(ThemeContext);
return theme;
};
/**
* 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>
* );
*/
export const useTailwind = () => {
const { tw } = useContext(ThemeContext);
return tw;
};
//# sourceMappingURL=hooks.mjs.map