@iunigo/ui-kit

v1.0.16

Published

4 months ago

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

0High
0Medium
0Low

iuniadmin

qzapaia

Setup

yarn add @iunigo/ui-kit

Use

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 | body1 | body2 | button | caption | overline] | "" | | bold | boolean | false | | ... | ... | More props can be checked here |

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 | body1 | body2 | button | caption | overline] | "" | | sm | [h1 | h2 | h3 | h4 | h5 | h6 | body1 | body2 | button | caption | overline] | "" | | md | [h1 | h2 | h3 | h4 | h5 | h6 | body1 | body2 | button | caption | overline] | "" | | lg | [h1 | h2 | h3 | h4 | h5 | h6 | body1 | body2 | button | caption | overline] | "" | | xl | [h1 | h2 | h3 | h4 | h5 | h6 | 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 |

FlatButton:ReactComponent

Prop | Type | Default | | ------------- |:-------------:| -----:| | ... | ... | More props can be checked here |

Grid:ReactComponent

Prop | Type | Default | | ------------- |:-------------:| -----:| | ... | ... | You can check more props here |

GridContainer:ReactComponent

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

Prop | Type | Default | | ------------- |:-------------:| -----:| | ... | ... | You can check more props here |

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.

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)