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)