export default withTheme(DemoBox);
`

In your app

`jsx
import React from 'react';
import { ThemeProvider } from 'theming';
import DemoBox from './components/DemoBox'

const theme = {
color: 'black',
background: 'white',
};

const App = () => (

{/ { color: 'black', background: 'white' } /}

)

export default App;
`

Playground demo

Be our guest, play with theming in codesandbox:
https://codesandbox.io/s/jvwzkkxrp5

!theming playground demo

Motivation

These components are enabling seamless theming for your react applications. So as far as you don't want to pass the theme object to every component. That's why you want to use context. However, as far context feature is _experimental API and it is likely to break in future releases of React_ you don't want to use it directly. Here theming comes to play.

> If you insist on using context despite these warnings, try to isolate your use of context to a small area and avoid using the context API directly when possible so that it's easier to upgrade when the API changes.
>
> If you insist on using context despite these warnings, try to isolate your use of context to a small area and avoid using the context API directly when possible so that it's easier to upgrade when the API changes.
> — Context, React documentation

Regarding _isolation your use of context to a small area_ and _small areas__ in particular our very own react prophet Dan Abramov have a thing to say:

> Should I use React unstable “context” feature?
>
> — Dan Abramov @dan_abramov on Twitter

So you are okay to use context for theming. theming package provides everything you need to do that:
* The ThemeProvider allows you to pass and update your theme through context down the react tree.
* withTheme allows you to receive theme and its updates in your components as a theme prop.
* createTheming allows you to integrate theming into your CSSinJS library with a custom context (if you need custom one).

API

$3

React High-Order component, which passes theme object down the react tree by context.

`jsx
import { ThemeProvider } from 'theming';
const theme = { /…/ };




`

#### props

##### props.theme

Required
Type: Object, Function

If its Object and its root ThemeProvider then it's intact and being passed down the react tree.

`jsx
const theme = { themed: true };


{/ { themed: true } /}

`

If its Object and its nested ThemeProvider then it is being merged with the theme from the parent ThemeProvider and passed down to the react tree.

`jsx
const theme = { themed: true };
const patch = { merged: true };



{/ { themed: true, merged: true } /}


`

If its Function and its nested ThemeProvider then it's being applied to the theme from parent ThemeProvider. If the result is an Object it's passed down to the react tree, throws otherwise.

`jsx
const theme = { themed: true };
const augment = outerTheme =>
Object.assign({}, outerTheme, { augmented: true });



{/ { themed: true, augmented: true } /}


`

##### props.children

Required
Type: PropTypes.element

$3

React High-Order component, which maps context to theme prop.

#### component

Required
Type: ComponentType

You need to have ThemeProvider with a theme somewhere upper the react tree after that wrap your component in withTheme and your component gets the theme as a prop. withTheme handles the initial theme object as well as theme updates.

PS. It doesn't break if you have PureComponent somewhere in between your ThemeProvider and withTheme.

Usage with Component:

`jsx
import React from 'react';
import { withTheme } from 'theming';

const DemoBox = props => {
console.log(props.theme);
return (