UIKit hbsis com ReactJS

Instalação

Yarn

yarn add @hbsis.uikit/react

NPM

npm i --save @hbsis.uikit/react 

Configuração no loader do webpack (opcional)

Caso você queira utilizar as otimizações do webpack do seu projeto, siga os passos a seguir:

Exemplo

Pegue o caminho dos componentes do uikit com a biblioteca path do node

const uikit: path.join(__dirname, '..', 'node_modules', '@hbsis.uikit', 'react', 'src', 'components')

Adicione no loader do seu webpack

jsLoader: {
    test: /\.js$/,
    include: paths.uikit,
    use: 'babel-loader'
  }

CSS e fontes

O css e fonte precisam ser configurados pra algumas features do uikit funcionarem.

Adicione o uikit nos loaders css-loader pro css e file-loader para as fontes

Exemplo

Caminho do uikit

const uikit: path.join(__dirname, '..', 'node_modules', '@hbsis.uikit', 'react', 'dist')

E adicione nos loader:

  cssLoader: {
    test: /\.css$/,
    include: paths.uikit,
    use: [
      'style-loader',
      'css-loader'
    ]
  },
  
  fileLoader: {
    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|txt)(\?.*)?$/,
    include: paths.uikit,
    use: {
      loader: 'file-loader',
      query: {
        name: 'media/[name].[hash:8].[ext]'
      }
    }
  }

Importe o css no componente

import '@hbsis.uikit/react/dist/uikit.css'

Como usar

ES6 / ES2015 Module

import {Button} from '@hbsis.uikit/react'

JSX

<Button type="primary" value="primary" />