npm package: @iunigo/ui-kit
Description: ``` yarn add @iunigo/ui-kit ```
Latest version: 1.0.16

## Setup
```
yarn add @iunigo/ui-kit
```

## Use

```jsx
import { ThemeProvider } from "@iunigo/ui-kit";

export default () => (
  <ThemeProvider>
    <MyApp />
  </ThemeProvider>
)

```

---

## ThemeProvider:ReactComponent
Inject the theme using Material and styled-componentes ThemeProviders. 
It uses the mainTheme

| Prop        | Type           | Default  |
| ------------- |:-------------:| -----:|
| theme      | Valid theme object | mainTheme |

---

## mainTheme:Object
Default theme.

---

## useTheme: Hook
Access to the theme using a hook.

---

## Text(Typography):ReactComponent
Print text.

  Prop        | Type           | Default  |
| ------------- |:-------------:| -----:|
| variant      | Enum[h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| <br /> body1 \| body2 \| button \| caption \| overline] | "" |
| bold      | boolean | false |
|  ...  |  ... | More props can be checked [here](https://material-ui.com/api/typography/) |


---

## Responsivetext(Typography):ReactComponent
Same as Text but it allow to indicate a new size for any breakpoint.

  Prop        | Type           | Default  |
| ------------- |:-------------:| -----:|
| xs  |  [h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| <br /> body1 \| body2 \| button \| caption \| overline] | "" |
| sm  |  [h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| <br /> body1 \| body2 \| button \| caption \| overline] | "" |
| md  |  [h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| <br /> body1 \| body2 \| button \| caption \| overline] | "" |
| lg  |  [h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| <br /> body1 \| body2 \| button \| caption \| overline] | "" |
| xl  |  [h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| <br /> body1 \| body2 \| button \| caption \| overline] | "" |


---


## Button:ReactComponent

  Prop        | Type           | Default  |
| ------------- |:-------------:| -----:|
| variant | Enum[contained \| outlined \| Text]  | contained |
|  loading  |  boolean | false |
|  ...  |  ... | More props can be checked [here](https://material-ui.com/api/button/) |

---

## FlatButton:ReactComponent

  Prop        | Type           | Default  |
| ------------- |:-------------:| -----:|
|  ...  |  ... | More props can be checked [here](https://material-ui.com/api/button/) |

---

## Grid:ReactComponent

  Prop        | Type           | Default  |
| ------------- |:-------------:| -----:|
|  ...  |  ... | You can check more props [here](https://material-ui.com/api/grid/) |

---

## GridContainer:ReactComponent

An alias for `<Grid container>`with the default `breakpoints` and `max-width` rules.

  Prop        | Type           | Default  |
| ------------- |:-------------:| -----:|
|  ...  |  ... | You can check more props [here](https://material-ui.com/api/grid/) |


```jsx
import { GridContainer, Grid } from "@iunigo/ui-kit";

export default () => (
  <GridContainer spacing={3}>
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(n => (
      <Grid item xs={6} sm={1} md={1}>
        <span>
          Content
        </span>
      </Grid>
    ))}
  </GridContainer>
)

```


---


## withNextSSR:HOC
Wrap **_document** in order to inject styles in next js ssr.

```jsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { withNextSSR } from "@iunigo/ui-kit";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link rel="stylesheet" href="/static/fonts/gt-walsheim/styles.css"/>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

// Wrap the document
export default withNextSSR(MyDocument)
```