influitive/Gild

Tools for theming react components

Usage:

import React from 'react';
import ReactDOM from 'react-dom';

import jss from 'jss';
import nested from 'jss-nested';
jss.use(nested());

import { ThemeProvider, connectTheme } from '../src';

const theme = {
  primary: 'green'
};

// Component we would like the theme
const component = (props) => {
  return <div className={props.styles.primary}>{JSON.stringify(props)}</div>;
};

// Function that maps the themeObject to css
const mapPropsToCSS = ({ primary }) => (
  {
    primary: {
      color: 'red',
      width: '100%',
      'background-color': primary,
      '&:hover': {
        color: 'yellow'
      }
    }
  }
);

// Connect the component to the ThemeProvider
const Blah = connectTheme(mapPropsToCSS)(component);

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Blah />
  </ThemeProvider>,
  document.getElementById('app')
);