Last active
November 4, 2020 13:26
-
-
Save calendee/8d7dc8f58fb04199eae83f0a7151fcf7 to your computer and use it in GitHub Desktop.
react-native-styled.macro useStyles Hook Concept
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ////////////////////////////////// | |
| // Start useStyles.js | |
| import { useMemo } from "react"; | |
| import styled from "react-native-styled.macro"; | |
| import { useWindowVariant } from "react-native-styled.macro/lib"; | |
| export function useStyles(styleDefinition) { | |
| const variants = useWindowVariant(); | |
| const styles = useMemo(() => { | |
| const components = Object.keys(styleDefinition); | |
| return components.reduce((accumulator, componentKey) => { | |
| const component = component[componentKey]; | |
| accumulator[componentKey] = { | |
| ...styled( | |
| component.utils, | |
| component.variantsRequired ? variants : null, | |
| ), | |
| }; | |
| }, {}); | |
| }, [styleDefinition, variants]); | |
| return styles; | |
| } | |
| // End useStyles.js | |
| ////////////////////////////////// | |
| ////////////////////////////////// | |
| // Start component1Styles.js | |
| export const component1Styles = { | |
| button: { | |
| utils: [ | |
| "mx-2", | |
| "my-4", | |
| "border", | |
| "rounded-full", | |
| "border-teal-600", | |
| "bg-teal-600", | |
| "sm:bg-green-600", | |
| "md:bg-teal-600", | |
| "lg:bg-yellow-600", | |
| "xl:bg-orange-600", | |
| ], | |
| variantsRequired: true, | |
| }, | |
| buttonText: { | |
| utils: ["px-2", "py-1", "text-base", "text-white"], | |
| variantsRequired: false, | |
| }, | |
| container: { | |
| utils: ["flex-1", "items-center"], | |
| variantsRequired: false, | |
| }, | |
| }; | |
| // End component1Styles.js | |
| ////////////////////////////////// | |
| ////////////////////////////////// | |
| // Start component1.js | |
| function Component1() { | |
| import {component1Styles} from "./component1Styles.js"; | |
| const styles = useStyles(component1Styles); | |
| return ( | |
| <View styles={...styles.container}> | |
| <Pressable {...styles.button} onPress={handlePress}> | |
| <Text {...styles.buttonText}>Press me</Text> | |
| </Pressable> | |
| </View> | |
| ); | |
| } | |
| // End component1.js | |
| ////////////////////////////////// | |
| ////////////////////////////////// | |
| // Start component2Styles.js | |
| export const component2Styles = { | |
| button: { | |
| utils: [ | |
| "mx-2", | |
| "my-4", | |
| "border", | |
| "rounded-full", | |
| "border-teal-600", | |
| "bg-teal-600", | |
| "sm:bg-green-600", | |
| "md:bg-teal-600", | |
| "lg:bg-yellow-600", | |
| "xl:bg-orange-600", | |
| ], | |
| variantsRequired: true, | |
| }, | |
| buttonText: { | |
| utils: ["px-2", "py-1", "text-base", "text-white"], | |
| variantsRequired: false, | |
| }, | |
| container: { | |
| utils: ["flex-1", "items-center"], | |
| variantsRequired: false, | |
| }, | |
| }; | |
| // End component2Styles.js | |
| ////////////////////////////////// | |
| ////////////////////////////////// | |
| // Start component2.js | |
| function Component2() { | |
| import {component2Styles} from "./component2Styles.js"; | |
| const styles = useStyles(component2Styles); | |
| return ( | |
| <View styles={...styles.container}> | |
| <Pressable {...styles.button} onPress={handlePress}> | |
| <Text {...styles.buttonText}>Press me</Text> | |
| </Pressable> | |
| </View> | |
| ); | |
| } | |
| // End component2.js | |
| ////////////////////////////////// |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment