Getting Started

react-breeze is a component library working with configurable colors.

It allows for quick prototyping, while giving a good degree of freedom.

Installation

yarn

yarn add react-breeze

npm

npm add --save react-breeze

Configuration

Before using react-breeze, you need to setup Tailwind CSS.

Step 1: allow active variant

Next, you need to allow the variant active for background color:

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{html,js}', './node_modules/react-breeze/**/*.js'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
  plugins: [],
};

Step 2: colors

Components in react-breeze work by passing them a color intent (primary, secondary, success, info, warning and danger) and in some cases two bonus colors (light and dark).

import { Button } from 'react-breeze';

<Button>Button (Primary by default)</Button>
<Button color="secondary">Button (Secondary)</Button>

Those colors must be added to the theme -> extends -> colors object inside tailwind.config.js. For ease of use, react-breeze provide a function to generate them:

const { generateColors } = require('react-breeze');

module.exports = {
  content: ['./src/**/*.{html,js}', './node_modules/react-breeze/**/*.js'],
  theme: {
    extend: {
      colors: generateColors(),
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
  plugins: [],
};

While a default color palette is used by generateColors, you can define your own colors for each intent:

const { generateColors } = require('react-breeze');

module.exports = {
  content: ['./src/**/*.{html,js}', './node_modules/react-breeze/**/*.js'],
  theme: {
    extend: {
      colors: generateColors({
        primary: '#0d6efd',
        secondary: '#6c757d',
        info: '#17a2b8',
        success: '#28a745',
        warning: '#ffc107',
        danger: '#dc3545',
      }),
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
  plugins: [],
};

(Tailwind use a shade system, which will be handled by generateColor, using the given color as the middle (500/DEFAULT) value)

Step 3: safelist

Classnames using those colors are generated dynamically, which means that some will be removed from the CSS at build time. In order to work, react-breeze makes use of the safelist property inside tailwind.config.js.

React-breeze comes with an utility function generateSafelist. It generates all the classnames that shouldn't be removed:

const { generateColors } = require('react-breeze');

module.exports = {
  content: ['./src/**/*.{html,js}', './node_modules/react-breeze/**/*.js'],
  theme: {
    extend: {
      colors: generateColors(),
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
  plugins: [],
  safelist: generateSafelist(),
};

That's it, you're good to go! Explore components