Runs the app in the development mode.
Open http://localhost:3000 to view the components in the browsers
The page will reload if you make edits.
Components
Buttons
Available props :
name
types
Detail
text
String
Will be the text in the button
className
String
button-grey
button-blue
button-ghost
button-disabled
size
String
M
L
S
onClick
Function
Pass the onClick function you want on the button
icon
JSX icon
Add an icon to the button, ex:""
Icons
Available props :
name
types
Detail
type
String
Will be the text in the button
size
String
small-icon
medium-icon
large-icon
Available of type:
ChevronLeft
ChevronRight
ChevronDown
ChevronUp
Plus
Minus
User
AtSign
Lock
X
ArrowUpCircle
Search
Lock
AlertCircle
CheckCircle
ArrowLeft
ArrowRight
Thermometer
Inputs
Available props :
name
types
Detail
element
String
Input
Select
TextArea
id
String
type
String
Html input types
label
String
Label on top of the input
validators
Function
Function to validate the inputs. If not needed, pass an empty array
errorText
String
Helper text below the input
onInput
Function
Function that handles the input
disabled
Boolean
Let to enable of disable the input. If true, add "disabled" className.
className
String
Can set a specific className to overpass the default.
data
Array
Let you pass an array for select html inputs
min
Number
Work together with number type
max
Number
Work together with number type
logo
Icon component
Let you pass a logo on the right of the input
NB : validators && onInput works together with the form-hook && validators
Toggle
Available props :
name
types
Detail
name
String
Input name
size
String
small
big
onChange
Function
Give a function to your toggle
labelRight
String
Label on the right of the toggle
labelLeft
String
Label on the left of the toggle
checkedInput
Boolean
Disable the toggle
Radio
Available props :
name
types
Detail
onChange
Function
Give a function to your radio
value
String
label
String
Label on the right of your radio
Checkbox
Available props :
name
types
Detail
onChange
Function
Give a function to your checkbox
name
String
Give a function to your checkbox
checked
Boolean
Default checked
label
String
Label on the right of your checkbox
FilePicker
Available props :
name
types
Detail
onInput
Function
Handle downloaded file
NB: work together with form-hook
Login
Available props :
name
types
Detail
successLogin
Function
Give a function on sucessfull login
retrievePassword
Function
NavBar
Available props :
Avatar
Available props :
name
types
Detail
size
String
small-avatar
medium-avatar
large-avatar
image
Boolean
If true, pass the source. If false, passe the initials
source
String
link to an image
description
String
Let you pass a description to the picture
initiale
String
Display initials instead of picture ("S.B.")
Tags
Available props :
name
types
Detail
text
String
Pass string to be displayed in the tag
type
String
If true, pass the source. If false, passe the initials
Small cards
Available props :
name
types
Detail
icon
Icon
Imported from icon Component
title
String
Let you se a title to the card
subTitle
String
Let you se a sub-title to the card
temperature
Number
Label on the right of the toggle
menu
Boolean
Add or not an icon to the right of the card
onClick
Function
If Menu is set to true, possibility to add function to the icon
simpleCard
Boolean
if True, create a simple card with only Title and sub-title
Created with ❤️ by Simon Busch for E-nno Switzerland S.A.