@mergerocks/components v0.0.1

✨ Features

• 📦 A set of high-quality React components out of the box.
• 🛡 Written in TypeScript with predictable static types.
• 🎨 Powerful theme customization in every detail.

🖥 Environment Support

📦 Install

npm install @mergerocks/components

yarn add @mergerocks/components

🔨 Usage

import { Button, MergeComponentsProvider } from '@mergerocks/components';

const App = () => (
  <MergeComponentsProvider>
    <Button>Button</Button>
  </MergeComponentsProvider>
);

You can chamge theme:

import { Button, MergeComponentsProvider } from '@mergerocks/components';

const myCustomTheme = {
  ...
}

const App = () => (
  <MergeComponentsProvider theme={myCustomTheme}>
    <Button>Button</Button>
  </MergeComponentsProvider>
);

TypeScript

@mergerocks/components is written in TypeScript with complete definitions.

⌨️ Development

$ git clone git@github.com:mergerocks/merge-components.git
$ cd merge-components
$ yarn
$ yarn dev

Open your browser and visit http://127.0.0.1:6006 , see more at Storybook.

🎨 Theme

const borderRadius = '4px';
const colors = {
  mainColor: '#2784FF',
};

const theme = {
  fontFamily:
    '-apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Ubuntu, roboto, noto, arial, sans-serif',
  components: {
    button: {
      backgroundColor: colors.mainColor,
      backgroundColorHover: '#4d99ff',
      backgroundColorActive: '#0570ff',
      borderColor: colors.mainColor,
      borderColorHover: '#4d99ff',
      borderColorActive: '#0570ff',
      color: 'white',
      colorHover: 'white',
      colorActive: 'white',
      borderRadius,
      fontSize: '0.9rem',
      fontWeight: 500,
      height: '34px',
      padding: '0 32px',
    },
  },
  scroll: {
    backgroundColor: 'transparent',
    color: colors.mainColor,
    size: '2px',
    borderRadius: '2px',
  },
  transition: {
    duration: '0.2s',
    timingFunction: 'ease-in-out',
  },
};

License

This project is licensed under the MIT License - see the LICENSE.md file for details