Style Props
This library maps React component props to style objects with theming.
For example,
// Wrapped component
<View backgroundColor="green" />
// Resulting component
<View style={{ backroundColor: 'green' }}>
Installation
yarn add @churchcommunitybuilder/style-props
Usage
This library has one export, createStyleHelpers
. This accepts your default theme, and will return
all the helpers you need to provide your theme context, as well as wrap components with style props
and access your theme within components
interface Theme {
color: string
}
const {
ThemeContext,
useTheme,
buildStyleProps,
withStyleProps,
useStyleProps,
useStyle,
} = createStyleHelpers<Theme>({ color: 'green' })
ThemeContext
This is the React context created from your default theme. Make sure to wrap your application
<ThemeContext.Provider value={theme}>
useTheme
A convenience hook to get the current theme context value
const theme = useTheme()
buildStyleProps
A helper to build a style props mapper array that can be passed to either withStyleProps
or useStyleProps
.
const defaultMapping = buildStyleProps(['color', 'backgroundColor])
const customMapping = buildStyleProps({
styleProps: ['margin'],
mapStyle: (styleValue, theme, styleName) => {
// if the margin prop is true, then use the default theme size
if (styleName === 'margin' && styleValue === true) {
return theme.defaultMargin
}
return value
}
})
const fullyCustom = buildStyleProps((props, theme) => {
return {
color: props.color,
backgroundColor: theme.backgroundColor,
}
})
const StyledComponent = withStyleProps<ViewProps>(View, styleProps)
withStyleProps
An HOC to expose style props on a component
const styleProps = [['backgroundColor'], ['margin']]
const StyledComponent = withStyleProps<ViewProps>(View, styleProps)
<StyledComponent backgroundColor="green" margin={16} />
// Becomes
<View style={{ backgroundColor: 'green', margin: 16 }}>
useStyleProps
A hook to map style props
const styleProps = [['backgroundColor'], ['margin']]
const { style, extraProps } = useStyleProps(props, styleProps)
return <View style={style} {...extraProps} />
useStyle
A convenience hook for building styles based off the theme
const props = { color: 'green' }
const style = useStyle(theme => ({
color: props.color,
backgroundColor: theme.backgroundColor,
}), [props.color])