Skip to content

Instantly share code, notes, and snippets.

@atticoos
Last active February 5, 2018 15:46
Show Gist options
  • Save atticoos/415e777fc796cbdbabf4bb46d03583a0 to your computer and use it in GitHub Desktop.
Save atticoos/415e777fc796cbdbabf4bb46d03583a0 to your computer and use it in GitHub Desktop.
Example HoC for style-properties
function withPropsAsStyleOverrides (WrappedComponent) {
return ({style, ...props}) => {
// make style spreadable
style = Array.isArray(style) ? style : [style]
// split the incoming properties into a style and forward group
const {styleProps, forwardProps} = Object.keys(props).reduce((split, key) => {
if (isStyleProp(key)) {
split.styleProps[key] = props[key]
} else {
split.forwardProps[key] = props[key]
}
return split
}, {styleProps: {}, forwardProps: {})
// forward non-style props, merge style rules onto copmbined style prop
return <WrappedComponent {...forwardProps} style={[styleProps, ...style]} />
};
}
const StylableView = withPropsAsStyleOverrides(View)
<StylableView height={50} width={50} backgroundColor="blue" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment