react-themable-hoc
Higher-order-components for theming using css-in-js.
npm install --save react-themable-hoc
Usage
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 = ="button" = />; button: color: themefontColor backgroundColor: themebackgroundColor Button;
Setup
Define your themes and add them to the ThemeManager
; ThemeManager;ThemeManager;
Pick your css-in-js interface (See Supported Interfaces)
This example uses the AphroditeInterface
; //... ThemeManager;
Setup the ThemeProvider
. This allows all components under the ThemeProvider
to have access to the current theme.
ReactDOM;
Options
You can pass options to the themed
HOC.
button: // ... pure: true Button;
Available options
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 |
Styling based on props
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.
button: color: themefontColor width: propssize 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 = { return currPropssize !== nextPropssize;}; button: color: themefontColor width: propssize 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.