npm:lm-uikit | Skypack

README

How to use

Installation

Install the UI kit using npm:

npm install lm-uikit

Use the provider

The provider helps passing some theming and options to the UI kit:

import ThemeProvider from "lm-uikit/lib/ThemeProvider";

const App: React.FC = props => {
    <ThemeProvider palette={{ primary: { main: '#3AD4A7' } }}>
        // Content here
    </ThemeProvider>
};

The provider has the following props:

`palette`

Send the theme colors used to the UI kit. The palette has the following interface:

type PaletteColor = {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
}

type Palette = {
  primary?: PaletteColor
  secondary?: PaletteColor
  error?: PaletteColor
  warning?: PaletteColor
  info?: PaletteColor
  success?: PaletteColor
}

Only the main value is mandatory. If light and dark are not set, they are computed automatically from the main color.

`typography`

Needed to let the UI kit to know about some typography changes done in the application. The options are:

type Typography = {
  htmlFontSize: number // Set the base font size in the application when changed using rem
}

The htmlFontSize option is needed when the base font size is changed using rem values. Click here for further information.

Components

TextField

Based on Material ui component outlined text field:

https://material-ui.com/es/components/text-fields/

import TextField from "lm-uikit/lib/TextField";

<TextField
    label='Name'
    value={name}
    onChange={ev => {}}
/>

Switch

Based on react-switch:

import Switch from "lm-uikit/lib/Switch";

<Switch checked={checked} onChange={() => setChecked(c => !c)} />

Select

Based on react-select:

import Select from "lm-uikit/lib/Switch";

const selectOptions = [
  { label: "January", value: "1" },
  { label: "February", value: "2" },
  { label: "March", value: "3" }
  // ...
];

<Select defaultValue={[selectOptions[1], selectOptions[2]]} options={selectOptions} isMulti />

Usage no npm install needed!