Buttons, Dialogs, Toasts & more yet to come...
#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 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 />
#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.
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!");
}
});
#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} />
<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!")} />