New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@iunigo/ui-kit

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@iunigo/ui-kit

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

1.0.16
latest
npm

Version published: 5 years ago

Weekly downloads: 3; decreased by-82.35%

Maintainers: 4

Weekly downloads

Created: 6 years ago

Source

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)

FAQs

What is @iunigo/ui-kit?

Is @iunigo/ui-kit popular?

Is @iunigo/ui-kit well maintained?

Package last updated on 20 Aug 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install