react-play-styled

A minimalistic react components library made with styled-components.

• UI Component Library— demonstrate styled-components with storybook and to build a CSS UI design system documentation.

Table of Contents

• Table of Contents
• Installing / Getting started
  • Initial Configuration
• Developing
• Usage
• Components
• Links
• License

Installing / Getting started

A quick introduction of the minimal setup you need to get a up & running.

$ npm i react-play-styled -S

or

$ yarn add react-play-styled

Initial Configuration

Note: every component has a peer dependencies. To use these components you also need to install these peer dependencies.

$ npm i styled-components@4.1.2 actions@1.3.0
react-spring@8.0.27 polished@3.4.4
styled-components-modifiers@1.2.5

Developing

Play around with the project and view the documentation using:

$ npm run storybook

Usage

To see which components are available take a look at the components section.

// whatever components you need to import
import { Button } from 'react-play-styled';

export const myComponent = (props) => (
  <Button>Hello, World!</Button>
);

Components

• Buttons Component
• Modals Component
• TextFields Component

Links

A list of tools used to develop this project

• react - a js library for creating interactive UIs.
• styled-components - for css-in-js without worrying about specificity.
• polished - for css normalization.
• styled-components-modifiers - allows to pass props to styled-components.
• react-spring - for micro-interaction css animations using js.
• storybook - used for document the code and components.

License

MIT © Murshid Azher