Higher-order-components for theming using css-in-js.
npm install --save react-themable-hoc
Simply add the themed
HOC to the bottom of your component class.
import React from 'react';
import { themed } from 'react-themable-hoc';
const Button = ({ onClick, classNames }) => (
<input className={classNames.button} type="button" onClick={onClick} />
);
export default themed(theme => ({
button: {
color: theme.fontColor,
backgroundColor: theme.backgroundColor
}
}))(Button);
Define your themes and add them to the ThemeManager
import { ThemeManager } from 'react-themable-hoc';
ThemeManager.addTheme('theme1', {
primaryColor: '#eee',
secondaryColor: '#bbb',
fontColor: '#333',
fontSize: '14px'
});
ThemeManager.addTheme('theme2', {
// ...
});
Pick your css-in-js interface (See Supported Interfaces)
This example uses the AphroditeInterface
import AphroditeInterface from 'react-themable-hoc-aphrodite-interface';
//...
ThemeManager.setStyleInterface(new AphroditeInterface());
Setup the ThemeProvider
. This allows all components under the ThemeProvider
to have access to the current theme.
ReactDOM.render(
<ThemeProvider theme="myTheme">
<App />
</ThemeProvider>,
document.getElementById('app')
);
You can pass options to the themed
HOC.
export default themed(theme => ({
button: {
// ...
}
}), { pure: true })(Button);
Name | type | Default | Description |
---|---|---|---|
pure | boolean | undefined | If true, the HOC will extend from React.PureComponent |
shouldUpdateStyles | function | undefined | Determine if stylesheets should be re-created on update. See Styling based on props |
classesPropName | string | 'classNames' | The name of the prop passed to the wrapped component with the generated classNames |
The component's props are passed along with the theme when creating your styles. This allows you to specify inline styles based on the props passed in.
export default themed((theme, props) => ({
button: {
color: theme.fontColor,
width: props.size
}
}))(Button);
You can pass a function called shouldUpdateStyles
as an option to control when the HOC will re-create the stylesheets when its props change.
const shouldUpdateStyles = (currProps, nextProps) => {
return currProps.size !== nextProps.size;
};
export default themed((theme, props) => ({
button: {
color: theme.fontColor,
width: props.size
}
}), { shouldUpdateStyles })(Button);
If pure
is true
and no shouldUpdateStyles
function is provided, themed
will perform a shallow comparison on its props to determine whether or not the stylesheets should be re-created.
If pure
is not set and shouldUpdateStyles
is not provided, themed
will always re-create stylesheets for this component when it updates.