cloudflare / cf-ui

:gem: Cloudflare UI Framework
Other
1.29k stars 81 forks source link

Add withTheme and withRenderer into cf-style-container #305

Closed tajo closed 7 years ago

tajo commented 7 years ago

I've added two new HOCs. They are handy for integration with third party stuff.

withTheme(Component)

A HOC that passes the current theme from context into the prop theme. This is useful when you need to access the theme without using createComponent. In other words, you can't create a new styled component with it.

import { withTheme } from 'cf-style-container';

const MyComponent = ({ theme }) => <div>Color: {theme.colors.hail}</div> 

export default withTheme(MyComponent);

withRenderer(Component)

A HOC that passes the renderer from context into the prop renderer. This is useful for third party integration when you need to generate a class name and you can't create a new styled component with it.

import { withRenderer } from 'cf-style-container';

const MyComponent = ({ theme }) => {
  const styles = props => ({
    fontSize: props.fontSize,
    color: 'red'
  });
  const className = renderer.renderRule(styles, { fontSize: 12 })
  return (<div>Class name: {className}</div>);
} 

export default withRenderer(MyComponent);