Reactivus
Buttons, Dialogs, Toasts & more yet to come...
About
Installation
Button
Dialog
Toast
Accordion
Tag
Progress
Input
Switch
Select
Theme
#About
Reactivus was created with only one goal, to facilitate frontend web development with pre built reusable components. The lib is yet under construction and many ideas are about to be brought to life.
#Installation

  npm install reactivus
  # or 
  yarn add reactivus
#Button

Import

Import the Button component like this:

  import { Button } from 'reactivus';

Basic Usage

To display a simple button with a text on it, use the label prop.


  <Button label="Submit" />

Styles

To change the styles, use the color prop.


  <Button label="Success Button" color="success" /> 
  <Button label="Danger Button" color="danger" />
  <Button label="Warning Button" color="warning" />
  <Button label="Info Button" color="info" />
  <Button label="Dark Button" color="dark" />

Icons

To display icons inside your buttons, use the icon and the iconPosition props.
The iconPosition prop accepts both left and right options.


  <Button label="Success Button" color="success" icon={<PlusSvg />} iconPosition="left" /> 
  <Button label="Danger Button" color="danger" icon={<PlusSvg />} iconPosition="left" />
  <Button label="Warning Button" color="warning" icon={<PlusSvg />} iconPosition="left" />
  <Button label="Info Button" color="info" icon="+" iconPosition="right" />
  <Button label="Dark Button" color="dark" icon="+" iconPosition="right" />

  <Button color="success" icon={<PlusSvg />} />
  <Button color="danger" icon={<PlusSvg />} />
  <Button color="warning" icon={<PlusSvg />} />
  <Button color="info" icon={"+"} />
  <Button color="dark" icon={"+"} />

Tooltip

To display small messages in your buttons, use the tooltip and tooltipPosition props.


  <Button label="Success Button" color="success" shadow tooltip="Tooltip message at success button" tooltipPosition="top" />
  <Button label="Danger Button" color="danger" shadow tooltip="Tooltip message at danger button" tooltipPosition="right" />
  <Button label="Warning Button" color="warning" shadow tooltip="Tooltip message at warning button" tooltipPosition="left" />
  <Button label="Info Button" color="info" shadow tooltip="Tooltip message at info button" tooltipPosition="bottom" />
  <Button label="Dark Button" color="dark" shadow tooltip="Tooltip message at dark button" tooltipPosition="top" />

Rounded

To display rounded buttons, use the rounded prop.


  <Button label="Success Button" color="success" rounded /> 
  <Button label="Danger Button" color="danger" rounded />
  <Button label="Warning Button" color="warning" rounded />
  <Button label="Info Button" color="info" rounded />
  <Button label="Dark Button" color="dark" rounded />

  <Button color="success" icon={<PlusSvg />} rounded />
  <Button color="danger" icon={<PlusSvg />} rounded />
  <Button color="warning" icon={<PlusSvg />} rounded />
  <Button color="info" icon={"+"} rounded />
  <Button color="dark" icon={"+"} rounded />

Text

To display buttons as textual elements, use the text prop.


  <Button label="Success Button" color="success" text /> 
  <Button label="Danger Button" color="danger" text />
  <Button label="Warning Button" color="warning" text />
  <Button label="Info Button" color="info" text rounded />
  <Button label="Dark Button" color="dark" text rounded />

  <Button color="success" text rounded icon={<PlusSvg />} />
  <Button color="danger" text rounded icon={<PlusSvg />} />
  <Button color="warning" text rounded icon={<PlusSvg />} />
  <Button color="info" text icon={<PlusSvg />} />
  <Button color="dark" text icon={<PlusSvg />} />

Shadow

You can display buttons with predefined shadow, use the shadow prop.


  <Button label="Success Button" color="success" text shadow /> 
  <Button label="Danger Button" color="danger" text shadow />
  <Button label="Warning Button" color="warning" text shadow />
  <Button label="Info Button" color="info" text rounded shadow />
  <Button label="Dark Button" color="dark" text rounded shadow />
        
  <Button color="success" text rounded icon={<PlusSvg />} shadow />
  <Button color="danger" text rounded icon={<PlusSvg />} shadow />
  <Button color="warning" text rounded icon={<PlusSvg />} shadow />
  <Button color="info" text icon={<PlusSvg />} shadow />
  <Button color="dark" text icon={<PlusSvg />} shadow />

Loading

To set a laoding status, use the loading prop.


  <Button label="Success Button" color="success" loading iconPosition="right"/>
  <Button label="Danger Button" color="danger" loading iconPosition="right" />
  <Button color="warning" icon={<PlusSvg />} loading/>
  <Button label="Info Button" color="info" loading iconPosition="right" text shadow />
  <Button label="Dark Button" color="dark" loading iconPosition="right" />

Disabled

To disable the button, use the disabled prop.


  <Button label="Success Button" color="success" disabled />
  <Button label="Danger Button" color="danger" disabled />
  <Button label="Warning Button" color="warning" disabled />
  <Button label="Info Button" color="info" disabled />
  <Button label="Dark Button" color="dark" disabled />
#Dialog

Import

Import the dialog method like this:

  import { dialog } from 'reactivus';

Basic Usage

To show a simple dialog with a text title on it, use the show method together with the title prop.


  dialog.show({
  title: "This dialog is working!",
  })

Text

To display a text under the dialog title, use the text prop.


  dialog.show({
  title: "This dialog is working!",
  text: "Have u installed Reactivus already?",
  })

Icon

To display a icon above, use the icon prop.
The icon options are success, danger, warning, info and question


  dialog.show({
  icon: "success",
  title: "Success icon example",
  })
    

  dialog.show({
  icon: "danger",
  title: "Danger icon example",
  })
    

dialog.show({
icon: "warning",
title: "Warning icon example",
})


dialog.show({
icon: "information",
title: "Info icon example",
})


dialog.show({
icon: "question",
title: "Question icon example",
})

JSX

To display a JSX element, use the htmlx prop.


  dialog.show({
  icon: "success",
  title: "Good job ;)",
  htmlx: (
    <Container gap="10px">
      <Button label="Submit" color="success" />
      <Button label="Cancel" color="danger" />
    </Container>
  ),
  })

Position

To display the dialog in a specific position, use the position prop.


  dialog.show({
    icon: "success",
    title: "Good job ;)",
    text: "The default position property is 'center'",
    position: "top-left",
    htmlx: (
      <Container flexDirection="column">
        <b>top-left</b>
        <b>top-center</b>
        <b>top-right</b>
        <b>center-left</b>
        <b>center</b>
        <b>center-right</b>
        <b>bottom-left</b>
        <b>bottom-center</b>
        <b>bottom-right</b>
      </Container>
    ),
  });

Returns

The dialog is a promise with 3 possible return values such as isConfirmed, isCanceled and isAborted.
The isConfirmed value is returned when clicking in the confirm button.
The isCanceled value is returned when clicking in the cancel button.
The isAborted value is returned when clicking outside the dialog or in the close button. 


  dialog
  .show({
    icon: "question",
    title: "Check the return values?",
    confirmButtonText: "Yes, check it out!",
    showCancelButton: true,
    cancelButtonText: "No, leave...",
  })
  .then((res) => {
    if (res.isConfirmed) {
      toast.success("You confirmed the action!");
    } else if (res.isCanceled) {
      toast.error("You canceled the action!");
    } else if (res.isAborted) {
      toast.warn("You aborted the action!");
    }
  });
#Toast

Import

Import both Toast and ToastContainer components like this:

  import { toast } from 'reactivus';

Basic Usage

To display a simple info toast with a message, use the info method.
Obs.: You need to place the ToastContainer component at your root layout file.


  <ToastContainer closeOnClick position="top-right" autoClose={5000} pauseOnHover />

  <Button label="Toast" onClick={() => toast.info("This is an info toast!") } />

Toast Types

You can choose between the following toast types:
errorinfosuccesswarn


  <Button label="Error Toast" color="danger" onClick={() => toast.error("This is an danger toast!")} />
  <Button label="Success Toast" color="success" onClick={() => toast.success("This is a success toast!")} />
  <Button label="Info Toast" color="info" onClick={() => toast.info("This is a info toast!")} />
  <Button label="Warn Toast" color="warning" onClick={() => toast.warn("This is a warning toast!")} />
#Accordion

Import

Import Accordion component like this:

  import { Accordion } from 'reactivus';

Basic Usage

To display a simple accordion with a text inside you can do something like this:
Obs.: The title prop is mandatory.

Lorem Ipsum Sample Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


    <Accordion title={"Lorem Ipsum Sample Text"}>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
    </Accordion>

Keep it open

You can keep your Accordion opened with the alwaysOpen prop:

Accordion that doesn't close

This Accordion Will Never Close


    <Accordion title={"Lorem Ipsum Sample Text"} alwaysOpen>
            <p>
              This <b>Accordion</b> Will Never Close
            </p>
    </Accordion>

Manually Control It

You can manually control the Accordion with your own React States using the isOpenControl and setIsOpenControl props like this:

Accordion with manual control

    const [openAccordion, setIsOpenAccordion] = useState<boolean>(true);

    <Accordion
      title={"Accordion with manual control"}
      isOpenControl={openAccordion}
      setIsOpenControl={setIsOpenAccordion}>
            <Button label="Close Accordion" color="danger" onClick={() => setIsOpenAccordion(false)}/>
    </Accordion>
#Tag

Import

Import Tag component like this:

  import { Tag } from 'reactivus';

Coloring

Success Tag
Danger Tag
Warning Tag
Info Tag
Dark Tag

To change the color, use the color prop.


  <Tag label="Success Tag" color="success" />
  <Tag label="Danger Tag" color="danger" />
  <Tag label="Warning Tag" color="warning" />
  <Tag label="Info Tag" color="info" />
  <Tag label="Dark Tag" color="dark" />

Rounded

Success Tag
Danger Tag
Warning Tag
Info Tag
Dark Tag

Make it rounded with the rounded prop.


  <Tag label="Success Tag" color="success" rounded />
  <Tag label="Danger Tag" color="danger" rounded />
  <Tag label="Warning Tag" color="warning" rounded />
  <Tag label="Info Tag" color="info" rounded />
  <Tag label="Dark Tag" color="dark" rounded />

Text Mode

Success Tag
Danger Tag
Warning Tag
Info Tag
Dark Tag

Use it in text mode with the text prop.


  <Tag label="Success Tag" color="success" text />
  <Tag label="Danger Tag" color="danger" text />
  <Tag label="Warning Tag" color="warning" text />
  <Tag label="Info Tag" color="info" text />
  <Tag label="Dark Tag" color="dark" text />

Border

Success Tag
Danger Tag
Warning Tag
Info Tag
Dark Tag

If u want, use the border option.


  <Tag label="Success Tag" color="success" text border />
  <Tag label="Danger Tag" color="danger" text border />
  <Tag label="Warning Tag" color="warning" text border />
  <Tag label="Info Tag" color="info" text border />
  <Tag label="Dark Tag" color="dark" text border />

Icon

Success Tag
Danger Tag
Warning Tag
Info Tag
Dark Tag

Define icons to be displayed inside the tag component like this:


  <Tag label="Success Tag" color="success" text icon={<FaCheck />} />
  <Tag label="Danger Tag" color="danger" text icon={<MdCancel />} />
  <Tag label="Warning Tag" color="warning" text icon={<IoIosWarning />} />
  <Tag label="Info Tag" color="info" text icon={<FaInfoCircle />} />
  <Tag label="Dark Tag" color="dark" text icon={<FaMoon />} />

Icon

Success Tag
Danger Tag
Warning Tag
Info Tag
Dark Tag

Change the icon position like this:


  <Tag label="Success Tag" color="success" text icon={<FaCheck />} iconPosition="left" />
  <Tag label="Danger Tag" color="danger" text icon={<MdCancel />} iconPosition="right" />
  <Tag label="Warning Tag" color="warning" text icon={<IoIosWarning />} iconPosition="left" />
  <Tag label="Info Tag" color="info" text icon={<FaInfoCircle />} iconPosition="right" />
  <Tag label="Dark Tag" color="dark" text icon={<FaMoon />} iconPosition="left" />
#Input

Import

Import Input component like this:

  import { Input } from 'reactivus';

Input Types

The Input types are text, number, date and password.


  <Input type="text" label="Text" placeholder="text"/>
  <Input type="number" label="Number" placeholder="number"/>
  <Input type="date" label="Date" placeholder="date"/>
  <Input type="password" label="Password" placeholder="password"/>

Value Control

Control the values either with React state or ref.


  <Input type="text" label="State Controled" placeholder="text" value={inputText} 
  onChange={() => {
    setInputText(e.value);     
  }} />

  <Input type="text" label="Ref Controled" placeholder="text" inputRef={inputTextRef} />

Icons

Define custom icons using the icon prop.


  <Input type="text" label="Search User" placeholder="text" icon={<FaAddressCard />} />

Icon Position

Change the icon position using the iconPosition prop.


  <Input type="text" label="Search User" placeholder="text" icon={<FaAddressCard />} iconPosition="right" />

Icon Position

Define an action to the icon using the iconAction prop.


  <Input type="text" label="Search User" placeholder="text" 
  icon={<FaAddressCard />} iconPosition="right" 
  iconAction={() => toast.success("Action dispatched")} />

Description

This is a sample description

Define a description to be displayed using the description prop.


  <Input type="text" label="Search User" placeholder="text" 
  icon={<FaAddressCard />} iconPosition="right" 
  description="This is a sample description" />

Description Color

Success description
Danger description
Info description
Warning description

Define a description to be displayed using the description prop.


  <Input type="text" label="Search User" placeholder="text" 
  icon={<FaAddressCard />} iconPosition="right" 
  description="Success description" descriptionColor="success" />

  <Input type="text" label="Search User" placeholder="text" 
  icon={<FaAddressCard />} iconPosition="right" 
  description="Danger description" descriptionColor="danger" />
  
  <Input type="text" label="Search User" placeholder="text" 
  icon={<FaAddressCard />} iconPosition="right" 
  description="Info description" descriptionColor="info" />
  
  <Input type="text" label="Search User" placeholder="text" 
  icon={<FaAddressCard />} iconPosition="right" 
  description="Warning description" descriptionColor="warning" />
#Progress

Import

Import Progress component like this:

  import { Progress } from 'reactivus';

Usage

70%

  <Progress percentage={70} color={"success"} width="100px"label="70%" labelPosition="left"/>
  <Progress percentage={40} color={"danger"} width="100px" rounded label="40%"/>
#Switch

Import

Import Switch component like this:

  import { Switch } from 'reactivus';

Usage


  <Switch label="Switch" />

Active Color

To change the active color, use the activeColor prop.


  <Switch label="Switch" activeColor="#cb2a29" />
#Select

Import

Import Select component like this:

  import { Select } from 'reactivus';

Usage

Select a state
Select a city

  const statesStringArray = [
    "Minas Gerais",
    "São Paulo",
    "Rio de Janeiro",
    "Distrito Federal",
  ];

  <Select
    label="States"
    options={statesStringArray}
    placeholder="Select a state"
  />

  const citiesObjectArray = [
    {
      name: "Belo Horizonte",
      code: "BH",
    },
    {
      name: "São Paulo",
      code: "SP",
    },
    {
      name: "Rio de Janeiro",
      code: "RJ",
    },
    {
      name: "Brasília",
      code: "BSB",
    },
  ];

  <Select
    label="Cities"
    options={citiesObjectArray}
    optionLabel={"name"}
    placeholder="Select a city"
  />

Filter

Select a city

To enable the filter, use the filter prop. Set the filter settings using the filterBy prop.


  <Select
    label="Cities"
    options={citiesObjectArray}
    optionLabel={"name"}
    placeholder="Select a city"
    filter
    filterBy="name,code"
    filterPlaceHolder="Search city"
  />

Multi Select

Select a city

To enable multiple selection use the multiSelect prop. Together with a value and an onChange call.
When multiSelect is enabled, e.value becomes an array.


  interface City {
    name: string;
    code: string;
  }

  const citiesObjectArray = [
    {
      name: "Belo Horizonte",
      code: "BH",
    },
    {
      name: "São Paulo",
      code: "SP",
    },
    {
      name: "Rio de Janeiro",
      code: "RJ",
    },
    {
      name: "Brasília",
      code: "BSB",
    },
  ];

  const [selectedCity, setSelectedCity] = useState<City[]>([citiesObjectArray[0]]);

  <Select
    label="Cities"
    options={citiesObjectArray}
    optionLabel={"name"}
    placeholder="Select a city"
    filter
    filterBy="name,code"
    filterPlaceHolder="Search city"
    multiSelect
    value={selectedCity}
    onChange={(e) => setSelectedCity(e.value)}
  />

Select All

Select a city

If the multiSelect prop is enabled, you can use the selectAll prop to enable an option to select all the options at once.


  interface City {
    name: string;
    code: string;
  }

  const citiesObjectArray = [
    {
      name: "Belo Horizonte",
      code: "BH",
    },
    {
      name: "São Paulo",
      code: "SP",
    },
    {
      name: "Rio de Janeiro",
      code: "RJ",
    },
    {
      name: "Brasília",
      code: "BSB",
    },
  ];

  const [selectedCity, setSelectedCity] = useState<City[]>([citiesObjectArray[0]]);

  <Select
    label="Cities"
    options={citiesObjectArray}
    optionLabel={"name"}
    placeholder="Select a city"
    filter
    filterBy="name,code"
    filterPlaceHolder="Search city"
    multiSelect
    value={selectedCity}
    onChange={(e) => setSelectedCity(e.value)}
    selectAll
  />

Template

Select a city

You can use the optionTemplate to define a custom way to render the options.


  interface City {
    name: string;
    code: string;
  }

  const citiesObjectArray = [
    {
      name: "Belo Horizonte",
      code: "BH",
    },
    {
      name: "São Paulo",
      code: "SP",
    },
    {
      name: "Rio de Janeiro",
      code: "RJ",
    },
    {
      name: "Brasília",
      code: "BSB",
    },
  ];

  const [selectedCity, setSelectedCity] = useState<City[]>([citiesObjectArray[0]]);

  <Select
    label="Cities"
    options={citiesObjectArray}
    optionLabel={"name"}
    placeholder="Select a city"
    filter
    filterBy="name,code"
    filterPlaceHolder="Search city"
    multiSelect
    value={selectedCity}
    onChange={(e) => setSelectedCity(e.value)}
    selectAll
    optionTemplate={(city: City) => {
      return <div>[{city.code}] {city.name}</div>
    }}
  />
#Theme

Theming classes

Edit classes as you like to customize the components:


  /* Defines global styles for itens with shadows applied */
  .r-box-shadow {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  }

  /* Defines global styles for itens on focus or selected */
  .r-item-selected {
    color: #0c63e4;
    background-color: #0c63e410;
  }
  .r-item-selected:hover {
    color: #0a5ad2;
    background-color: #0a5ad220;
  }
  .r-input-focused{
    box-shadow: #0a5ad290 0px 0px 0px 1px !important;
  }

  /* Defines global styles for the background color of the input switch when it's active */
  .r-switch-active {
    background-color: #3f7d54;
  }

  /* This is a example of classes that should be used to create a custom color pallette for the tag component*/
  /* Change the parameters as u like */
  .r-tag-custom {
    background-color: #3f7d54;
  }
  .r-tag-custom:hover {
    background-color: #056639;
  }
  .r-tag-text-custom {
    color: #3f7d54;
    background-color: #3f7d5420;
  }
  .r-tag-text-custom:hover {
    background-color: #3f7d5440;
  }
  .r-tag-text-custom-border {
    border: 1.5px solid #3f7d5440;
  }

  /* These status classes are used throughout the lib*/
  .r-status-success {
    color: #3f7d54;
  }
  .r-status-danger {
    color: #cb2a29;
  }
  .r-status-info {
    color: #2e86c1;
  }
  .r-status-warning {
    color: #ffa500;
  }