https://github.com/jschr/theme-provider
React components for building themes.
https://github.com/jschr/theme-provider
react react-helpers redux theming-components
Last synced: 2 months ago
JSON representation
React components for building themes.
- Host: GitHub
- URL: https://github.com/jschr/theme-provider
- Owner: jschr
- Created: 2016-10-28T19:56:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T23:17:48.000Z (over 2 years ago)
- Last Synced: 2024-05-02T00:55:17.183Z (about 1 year ago)
- Topics: react, react-helpers, redux, theming-components
- Language: TypeScript
- Homepage:
- Size: 275 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# theme-provider
[](https://www.npmjs.com/package/theme-provider)
[](https://travis-ci.org/jschr/theme-provider)
React helpers for theming components. Works with inline styles or any css-in-js library.
Demos:
* [Basic Example](http://theme-provider-basic-example.surge.sh/)
## Installation
```bash
npm install --save react react-dom redux react-redux # peer dependencies
npm install --save theme-provider
```
## Usage
```js
// MyApp.js
import { withTheme, ThemeProvider } from 'theme-provider'
function MyApp({ theme }) {
return (
)
}
// theme variables
export default withTheme({
primaryColor: 'blue'
})(MyApp)
// or theme variables as a function of props
export default withTheme(props => ({
primaryColor: props.primaryColor
}))(MyApp)
```
Check out the [basic form example](examples/basic) for the entire source.
```js
// MyThemedComponent.js
import { withStyles } from 'theme-provider'
function MyThemedComponent({ styles }) {
return (
)
}
export default withStyles(theme => ({
base: {
background: theme.primaryColor
}
}))(MyThemedComponent)
```
## Usage with Glamor
```js
// MyThemedComponent.js
import { style } from 'glamor'
import { withStyles } from 'theme-provider'
function MyThemedComponent({ styles }) {
return (
)
}
export default withStyles(theme => ({
base: style({
background: theme.primaryColor
})
}))(MyThemedComponent)
```
## Usage with Aphrodite
```js
// MyThemedComponent.js
import { StyleSheet, css } from 'aphrodite'
import { withStyles } from 'theme-provider'
function MyThemedComponent({ styles }) {
return (
)
}
export default withStyles(theme => StyleSheet.create({
base: {
background: theme.primaryColor
}
}))(MyThemedComponent)
```