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])