Getting Started

Installation

Open a Terminal in your project's folder and run,

yarn add atomize react-transition-group

Install Styletron engine

Atomize uses styletron engine for generating atomic className for style. Install for -

Usage

Include the StyleReset from atomize to your root component inside styletron wrapper. It's a good idea to add it in the component which is passed to entire app. This will usually be in the index.js file or App.js file.

Example:

import React from 'react';
import { StyleReset } from 'atomize';
import App from './src/App';
export default function Main() {
  return (
    <>
      <StyleReset />
      <App />
    </>
  );
}

Customization

You can provide a custom theme to customize the colors, fonts etc. with the ThemeProvider component. Check the theme customization options in Theme Setup.

Example:

import React from 'react';
import { ThemeProvider, StyleReset } from 'atomize';
import App from './src/App';
const theme = {
  colors: {
    primary: 'tomato',
    accent: 'yellow',
  },
};
export default function Main() {
  return (
    <ThemeProvider theme={theme}>
      <StyleReset />
      <App />
    </ThemeProvider>
  );
}