npm package: @react-pakistan/gumroad-storybook
Description: React Commons Collection built upon React StoryBook
Author: Taimoor Khan
Latest version: 1.0.2

# React Pakistan

<div>
  <a
    href="https://react-pakistan.github.io/react-pakistan-docs/"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Commons Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1565548545/GitHub/React_Pakistan_Storybook_Logo.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://react-pakistan.github.io/react-pakistan-docs/"
    target="_blank"
  >
    <img
      alt="Taimoor Khan - React Commons Collection Author"
      src="https://avatars1.githubusercontent.com/u/27800340?s=460&v=4"
      width="20%"
    />
  </a>
</div>

React Pakistan is an OpenSource & Free Software (FOSS) platform, creating React software solutions for the global community.

![](https://github.com/actions/react-commons-collection/workflows/github-ci/badge.svg?event=push)
![React Commons Collection Badge Branches](https://res.cloudinary.com/dq6hflqwx/image/upload/v1597117511/GitHub/badges/react-commons-collection/badge-branches.svg)
![React Commons Collection Badge Functions](https://res.cloudinary.com/dq6hflqwx/image/upload/v1597117511/GitHub/badges/react-commons-collection/badge-functions.svg)
![React Commons Collection Badge Lines](https://res.cloudinary.com/dq6hflqwx/image/upload/v1597117511/GitHub/badges/react-commons-collection/badge-lines.svg)
![React Commons Collection Badge Statements](https://res.cloudinary.com/dq6hflqwx/image/upload/v1597117511/GitHub/badges/react-commons-collection/badge-statements.svg)

## React Commons Collection

<div>
  <a
    href="https://taimoormk.github.io/react-commons-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Commons Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1566265693/GitHub/react-commons-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-commons-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Commons Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

A generic, Commons library for React web apps, following modern approach by building your project's UI in isolation using state of the art Storybook along with React.

## Install

Add React Commons Collection to your project. 

`yarn add @react-pakistan/react-commons-collection` or
`npm install @react-pakistan/react-commons-collection`

Add React Commons Collection base theme to your project.

`yarn add @react-pakistan/util-functions` or
`npm install @react-pakistan/util-functions`

### **Styles**

Styled Components are employed to maintain and update theme for this project. Please consider adding Styled Component Provider wrapper to the entry point of your application, following is the sample code.
You could either use the default theme as shown below or wire your custom theme object instead. See <a href="/docs/styleguide-typography--typography-story">Typography</a> & <a href="/docs/styleguide-colors--colors-story">Colors</a> being used in the theme object.

```javascript
  import { ThemeProvider } from 'styled-components';
  import { theme } from '@react-pakistan/util-functions';

  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
```

### **Use**

Refer to [React Pakistan Docs](https://react-pakistan.github.io/react-pakistan-docs) for detail usage docs.