https://github.com/strapi/buffet

Buffet.js — React Components Library made with styled-components
https://github.com/strapi/buffet

buffet component-library javascript react react-components strapi

Last synced: 3 months ago
JSON representation

Buffet.js — React Components Library made with styled-components

• Host: GitHub
• URL: https://github.com/strapi/buffet
• Owner: strapi
• Archived: true
• Created: 2019-01-25T09:47:01.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-06T17:31:19.000Z (almost 2 years ago)
• Last Synced: 2024-07-23T22:54:50.033Z (6 months ago)
• Topics: buffet, component-library, javascript, react, react-components, strapi
• Language: JavaScript
• Homepage: https://www.buffetjs.io
• Size: 23.8 MB
• Stars: 538
• Watchers: 21
• Forks: 67
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

• awesome - buffet - Buffet.js — React Components Library made with styled-components (JavaScript)
• awesome-list - buffet - components | strapi | 479 | (JavaScript)

README

        


  

    

  






React Components Library made with styled-components

  


    

      

    

    

      

    

    

      

    

  



## Getting Started

### Installation

Using yarn

```bash

yarn add @buffetjs/core @buffetjs/hooks  @buffetjs/styles

# Install the required dependencies

yarn add lodash prop-types react react-dom react-router-dom styled-components

```

or npm

```bash

npm install @buffetjs/core @buffetjs/styles @buffetjs/hooks --save

# Install the required dependencies

npm install lodash prop-types react react-dom react-router-dom styled-components --save

```

### Example

Import buffet.js into your project as follows:

```js

import React from 'react';

import {

  Enumeration,

} from '@buffetjs/core';

const Page = () => {

  const [state, setState] = React.useState('milk');

  return (

    

      
Title

    

    

       setState(value)}

        options={[

          {

            value: 'flour',

            label: 'Flour',

          },

          {

            value: 'milk',

            label: 'Milk',

          },

          {

            value: 'butter',

            label: 'Butter',

          },

        ]}

        value={state}

      />

    

    

      Made with love by Strapi

    

  );

}


export default Page;

```

## Documentation

See the documentation at [buffetjs.io/storybook](https://buffetjs.io/storybook) for more informations.