Library author

As a library author, you want to make your components easy to use. Here is a typical main export file that exposes the required tools for your users.

If you aren't already familiar with the global meta, read up about it in Theming. That page also discusses an important API, installLibraryMeta.

index.js

import {ThemeProvider, Styled, classify, installLibraryMeta}
   from 'styletron-themer';

// prep your library's global meta
const libraryMeta = {
  colors: {
    primary: '#00c653',
    gray0: '#000',
    gray6: '#666f74',
    grayE: '#e4eaed'
  },

  // other shared constants, mixins, etc
  hover: {
    transitionSpeed: '150ms'
  }
};

// install the global meta
installLibraryMeta(libraryMeta);

// re-export the library tools
export {ThemeProvider, Styled, classify};

// export your components
export {default as Button} from './lib/button/button';
export {default as Header} from './lib/header/header';
// etc...

Simplifying user code

You might want to simplify the requirements of your library users. This example moves low-level tools into the library, taking them out of the hands of the end user.

The first file is how the user would experience your library; the second is the library export file itself. For the full (unsimplified) user source, see the next sample.

user-setup-code.js

// this install requires fewer imports to initialize the library
import {LibraryProvider} from 'amazing-component-library';

const ourAppTheme = {/* ... */};

// no need for middleware, Styletron, ThemeProvider or StyletronProvider
render(
  <LibraryProvider theme={ourAppTheme}>
    <Home />
  </LibraryProvider>
, document.getElementById('app'));

library-export.js

export function LibraryProvider({theme, children}) {
  return (
    <ThemeProvider theme={theme}>
      <StyletronProvider styletron={new Styletron()}>
        {children}
      </StyletronProvider>
    </ThemeProvider>
  );
}