npm install reactivus
# or
yarn add reactivus
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 style prop.
<Button label="Success Button" style="btn-success" />
<Button label="Danger Button" style="btn-danger" />
<Button label="Warning Button" style="btn-warning" />
<Button label="Info Button" style="btn-info" />
<Button label="Dark Button" style="btn-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" style="btn-success" icon={<PlusSvg />} iconPosition="left" />
<Button label="Danger Button" style="btn-danger" icon={<PlusSvg />} iconPosition="left" />
<Button label="Warning Button" style="btn-warning" icon={<PlusSvg />} iconPosition="left" />
<Button label="Info Button" style="btn-info" icon="+" iconPosition="right" />
<Button label="Dark Button" style="btn-dark" icon="+" iconPosition="right" />
<Button style="btn-success" icon={<PlusSvg />} />
<Button style="btn-danger" icon={<PlusSvg />} />
<Button style="btn-warning" icon={<PlusSvg />} />
<Button style="btn-info" icon={"+"} />
<Button style="btn-dark" icon={"+"} />
Tooltip
To display small messages in your buttons, use the tooltip and tooltipPosition props.
<Button label="Success Button" style="btn-success" shadow tooltip="Tooltip message at success button" tooltipPosition="top" />
<Button label="Danger Button" style="btn-danger" shadow tooltip="Tooltip message at danger button" tooltipPosition="right" />
<Button label="Warning Button" style="btn-warning" shadow tooltip="Tooltip message at warning button" tooltipPosition="left" />
<Button label="Info Button" style="btn-info" shadow tooltip="Tooltip message at info button" tooltipPosition="bottom" />
<Button label="Dark Button" style="btn-dark" shadow tooltip="Tooltip message at dark button" tooltipPosition="top" />
Rounded
To display rounded buttons, use the rounded prop.
<Button label="Success Button" style="btn-success" rounded />
<Button label="Danger Button" style="btn-danger" rounded />
<Button label="Warning Button" style="btn-warning" rounded />
<Button label="Info Button" style="btn-info" rounded />
<Button label="Dark Button" style="btn-dark" rounded />
<Button style="btn-success" icon={<PlusSvg />} rounded />
<Button style="btn-danger" icon={<PlusSvg />} rounded />
<Button style="btn-warning" icon={<PlusSvg />} rounded />
<Button style="btn-info" icon={"+"} rounded />
<Button style="btn-dark" icon={"+"} rounded />
Text
To display buttons as textual elements, use the text prop.
<Button label="Success Button" style="btn-success" text />
<Button label="Danger Button" style="btn-danger" text />
<Button label="Warning Button" style="btn-warning" text />
<Button label="Info Button" style="btn-info" text rounded />
<Button label="Dark Button" style="btn-dark" text rounded />
<Button style="btn-success" text rounded icon={<PlusSvg />} />
<Button style="btn-danger" text rounded icon={<PlusSvg />} />
<Button style="btn-warning" text rounded icon={<PlusSvg />} />
<Button style="btn-info" text icon={<PlusSvg />} />
<Button style="btn-dark" text icon={<PlusSvg />} />
Shadow
You can display buttons with predefined shadow, use the shadow prop.
<Button label="Success Button" style="btn-success" text shadow />
<Button label="Danger Button" style="btn-danger" text shadow />
<Button label="Warning Button" style="btn-warning" text shadow />
<Button label="Info Button" style="btn-info" text rounded shadow />
<Button label="Dark Button" style="btn-dark" text rounded shadow />
<Button style="btn-success" text rounded icon={<PlusSvg />} shadow />
<Button style="btn-danger" text rounded icon={<PlusSvg />} shadow />
<Button style="btn-warning" text rounded icon={<PlusSvg />} shadow />
<Button style="btn-info" text icon={<PlusSvg />} shadow />
<Button style="btn-dark" text icon={<PlusSvg />} shadow />
Loading
To set a laoding status, use the loading prop.
<Button label="Success Button" style="btn-success" loading iconPosition="right"/>
<Button label="Danger Button" style="btn-danger" loading iconPosition="right" />
<Button style="btn-warning" icon={<PlusSvg />} loading/>
<Button label="Info Button" style="btn-info" loading iconPosition="right" text shadow />
<Button label="Dark Button" style="btn-dark" loading iconPosition="right" />
Disabled
To disable the button, use the disabled prop.
<Button label="Success Button" style="btn-success" disabled />
<Button label="Danger Button" style="btn-danger" disabled />
<Button label="Warning Button" style="btn-warning" disabled />
<Button label="Info Button" style="btn-info" disabled />
<Button label="Dark Button" style="btn-dark" disabled />
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.
dialog.show({
icon: "success",
title: "Good job ;)",
text: "The icon options are 'success', 'danger', 'warning', 'info' and 'question'",
})
JSX
To display a JSX element, use the htmlx prop.
dialog.show({
icon: "success",
title: "Good job ;)",
htmlx: (
<div
style={{
width: '100%',
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
}}
>
<Button label="Submit" style="btn-success" />
<Button label="Cancel" style="btn-danger" />
</div>
),
})
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: (
<div
style={{
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
}} >
<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>
</div>
),
});
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.danger("You canceled the action!");
} else if (res.isAborted) {
toast.warning("You aborted the action!");
}
});
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} />
<Button label="Toast" onClick={() => toast.info("This is an info toast!") } />
Toast Types
You can choose between the following toast types:
dangerinfosuccesswarning
<Button label="Danger Toast" style="btn-danger" onClick={() => toast.danger("This is an danger toast!")} />
<Button label="Danger Toast" style="btn-success" onClick={() => toast.success("This is an success toast!")} />
<Button label="Info Toast" style="btn-info" onClick={() => toast.info("This is an info toast!")} />
<Button label="Warning Toast" style="btn-warning" onClick={() => toast.warning("This is an warning toast!")} />
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 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:
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:
const [openAccordion, setIsOpenAccordion] = useState<boolean>(true);
<Accordion
title={"Accordion with manual control"}
isOpenControl={openAccordion}
setIsOpenControl={setIsOpenAccordion}>
<Button label="Close Accordion" style="btn-danger" onClick={() => setIsOpenAccordion(false)}/>
</Accordion>