Lighter Components

Getting starter

Install

npm i lighter-components

Components

TextFiled

Customized input

Importation

import LightTextfield from 'lighter-components/material/LightTextfield'

Attributes

variant

Defines which textfield style

Variant types

<LightTextfield label="Email" variant='outline' /> 
<LightTextfield label="Email" variant='default' />

color

Sets the color of the element

Color types

<LightTextfield label="Email" color='lightblue' />
<LightTextfield label="Email" color='lightgreen' />
<LightTextfield label="Email" color='lightpurple' />
<LightTextfield label="Email" color='lightyellow' />
<LightTextfield label="Email" color='lightred' />
<LightTextfield label="Email" color='dark' />

type

Sets the type of the element (Password or Text)

Types types

<LightTextfield label="Email" type='password' />
<LightTextfield label="Email" type='text' />

label

Defines the name that will appear as a placeholder

Label example

<LightTextfield label="Email" />

Button

Importation

import LightButton from 'lighter-components/material/LightButton'

Attributes

color

Sets the color of the element

Color types

<LightButton label="Send" color='lightblue' />
<LightButton label="Send" color='lightgreen' />
<LightButton label="Send" color='lightpurple' />
<LightButton label="Send" color='lightyellow' />
<LightButton label="Send" color='lightred' />
<LightButton label="Send" color='dark' />

label

Defines the name that will appear as a button

Label example

<LightButton label="Send" />

Modal

Importation

import LightModal from 'lighter-components/material/LightModal'

Attributes

open

Defines whether the modal is open or not

Open example

<LightModal open={*boolean variable*} />

onClose

Defines a handler to close the modal

Open example

<LightModal open={*boolean variable*} onClose={*handler*} />

Icons

Importation

import WarningIcon from 'lighter-components/material-icons/WarningIcon'
import InfoIcon from 'lighter-components/material-icons/InfoIcon'
import ErrorIcon from 'lighter-components/material-icons/ErrorIcon'
import SuccessIcon from 'lighter-components/material-icons/SuccessIcon'

Conclusion

This library is still in early versions, new components will arrive later.

Contact -> [email protected]