@ecrowjs/theme v1.1.0

A structured TypeScript interface for common all-inclusive theming among JS components.

This package also comes with a default JSON object and ReactJS Context instance (Reducers & Actions in progress).

Installation

eCrowJS Theme can be installed as an npm package.

# Install with NPM
npm install @ecrowjs/theme
# Install with Yarn
yarn add @ecrowjs/theme

Usage

ReactJS

Basic example of using this package in a ReactJS project

import React from 'react';
import { ThemeContext, defaultTheme } from '@ecrowjs/theme';

// Main application with theme provider.
function App(props) {
  return (
    <ThemeContext.Provider value={defaultTheme}>
      <themedButton />
    </ThemeContext.Provider>
  );
}

// Component that consumes the theme object provided.
function themedButton(props) {
  return (
    <ThemeContext.Consumer>
      (theme) => (
      <button
        style={{
          backgroundColor: theme.color.base.background,
        }}
      />)
    </ThemeContext.Consumer>
  );
}

Alternatively, you can use the withTheme decorator on the React Component.

const themedButton = withTheme()(Button);