@bitgrow/bitbybit NPM

BitByBit

A Bitgrow React design system

Installation

This package is hosted in NPM packages and to install, use:

npm install @bitgrow/bitbybit

Usage

After install in your project, import the files bellow on head of your main css file.

@import "@bitgrow/bitbybit/dist/index.css";
@import "@bitgrow/bitbybit/dist/bitbybit.css";

Theming

To define default theme, set data-theme property in your html tag.

<html data-theme="bitgrow">
	<body>
		{...}
	</body>
</html>

You can use the setTheme function to change theme your app:

import { setTheme, BitThemes } from '@bitgrow/bitbybit';

<button onClick={() => setTheme(BitThemes.DARK)}>dark</button>
<buttonon Click={() => setTheme(BitThemes.DEFAULT)}>light</button>

import { BitButton } from '@bitgrow/bitbybit';

<BitButton
  text="Submit"
  color="primary"
  onClick={() => handleSubmit()}
  icon={</MyIcon />}
/>

Development

Create new components in src/components and export on src/index.ts;

Example App

Use storybook to documentation and development.

npm run dev

Create new Theme

To create a new theme in Design System define the styles on index.css, and add the theme in setTheme.ts file, include type, and key on BitThemes object.