@mohamedhemidi/vault-ui v2.1.8

Vault UI

Table of Contents

1. Installation
2. Buttons components
3. Input text components
4. Select components
5. Lazy Load Image Component
6. Toast Component
7. API references and Usage

Installation

 npm install @mohamedhemidi/vault-ui

Buttons components

Simple buttons

<Button color="primary">Primary Button</Button>
<Button color="success">Success Button</Button>

When using Icons it's highly recommended to use Google svg icons as they support re-coloring with fill attribute.

 <Button
    icon={<EditIcon />}
    variant="outlined"
    size="small"
    color="primary"> Primary Outlined Button with Icon</Button>

Input text components

Simple input texts

<TextField label="Email" color="primary" type="text" name="username" />
<TextArea
    label="Summary"
    color="success"
    name="summary"
/>

Input with Error :

<TextField
    label="Username"
    error
    errorMessage="Username is already taken, try another"
    color="primary"
    type="text"
    name="username"
/>
<TextArea
          label="Description"
          color="success"
          name="description"
          error
          errorMessage="Please write a description"
/>

Select components

Example of usage:

const options = [
  { label: "First", value: 1 },
  { label: "Second", value: 2 },
  { label: "Third", value: 3 },
  { label: "Fourth", value: 4 },
  { label: "Fifth", value: 5 },
];
function App() {
    const [value1, setValue1] = useState<SelectOption[]>([options[0]]);
    const [value2, setValue2] = useState<SelectOption | undefined>(options[0]);
    
    return (
         <Select
          multiple
          options={options}
          value={value1}
          onChange={(o) => setValue1(o)}
        />
        
        <Select
          options={options}
          value={value2}
          onChange={(o) => setValue2(o)}
        />
    )
}

Lazy Load Image Component

Example of usage:

<LazyLoadImage 
src={'your_image_path'} alt='alt text' borderRadius="2rem" />

Toast Component

A light and responsive notifications toasts component:

const [active, setsActive] = useState(false);

<Toast
    message="You signed up successfully" // Toast message
    timer={6} // 6 seconds to close
    active={active} // 
    close={() => setsActive(false)}
/>

API References and Usage

API references doc for the button component and usage

  | Name | Type | Default | Description | |----------|-----------------------------------------------------------------------------------|---------|----------------------------------------------------------------------------------------------------------| | children | node | - | The content of the button | | color | |"primary" |"secondary" |"info" |"warning" |"danger" |"success" |"neutral" | primary | The background color of the button | | size | |"small" |"medium" |"large" | small | The size of the button | | variant | |"outlined" |"ghost" |"filled" |"shadow" | filled | The variant shape to use | | rounded | boolean | false | If true the button will be rounded ⚠️ If true, the button accepts only icons and No text or children | | disabled | boolean | false | If true button will be disabled | | loading | boolean | false | If true a loading spinner shows and button will be disabled | | icon | node | - | svg element placed at the beginning of the button , ⚠️ Google icons are recomended | | width | number | auto | Width size in rem unit | | height | number | auto | Height size in rem unit |

API References for Text Field component

API References for Text Area component

API References for Select component

API References for Lazy Load Image component