Skip to main content
Version: 2.3.0

Atom components

Atoms are core UI components that are re-used in all of our modals.

Input#

import React from "react";
import { Input } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Input placeholder="Input field" />
</div>
);
};

Props#

label#

string

The input label.

required#

boolean

Adds a "*" beside the label.

id#

string

Input id, also added to the htmlFor label attribute.

error#

string

Will add an error paragraph at the bottom of the input & display the error styling.

errorId#

string

The error paragraph id.

className#

string

Appended to the input field className attribute.

labelClassName#

string

Appended to the label className attribute.

errorClassName#

string

Appended to the error paragraph className attribute.

wrapperClassName#

string

Appended to the input wrapper className attribute.

info

Also accepts any prop that HTML input element supports.

TextArea#

import React from "react";
import { TextArea } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<TextArea placeholder="Text area" />
</div>
);
};

Props#

label#

string

The input label.

required#

boolean

Adds a "*" beside the label.

id#

string

Input id, also added to the htmlFor label attribute.

error#

string

Will add an error paragraph at the bottom of the input & display the error styling.

errorId#

string

The error paragraph id.

className#

string

Appended to the input field className attribute.

labelClassName#

string

Appended to the label className attribute.

errorClassName#

string

Appended to the error paragraph className attribute.

wrapperClassName#

string

Appended to the input wrapper className attribute.

info

Also accepts any prop that HTML input element supports.

Button#

import React from "react";
import { Button } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Button>Button</Button>
</div>
);
};

Props#

variant#

"solid"|"outline"|"icon"|"ghost"

The button style varient, default is "solid".

icon#

Element

Prefixes the button with an icon.

isLoading#

boolean

Triggers loading & disable state.

disabled#

boolean

Triggers disabled state.

className#

string

Appended to the button className attribute.

info

Also accepts any prop that HTML button element supports.

Checkbox#

import React from "react";
import { Checkbox } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Checkbox>Checkbox</Checkbox>
</div>
);
};

Props#

className#

string

Appended to the checkbox className attribute.

labelClassName#

string

Appended to the label className attribute.

id#

string

The checkbox element id.

info

Also accepts any prop that HTML input element supports.

Radio#

import React from "react";
import { Radio } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Radio>Radio</Radio>
</div>
);
};

Props#

className#

string

Appended to the radio className attribute.

labelClassName#

string

Appended to the label className attribute.

id#

string

The radio element id.

info

Also accepts any prop that HTML input element supports.

DatePicker#

import React from "react";
import { DatePicker } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<DatePicker />
</div>
);
};

Props#

label#

string

The input label.

required#

boolean

Adds a "*" beside the label.

id#

string

Input id, also added to the htmlFor label attribute.

error#

string

Will add an error paragraph at the bottom of the input & display the error styling.

errorId#

string

The error paragraph id.

tooltipText#

string

Adds a tooltip icon next to the label that displays the given text when on hover.

className#

string

Appended to the input field className attribute.

labelClassName#

string

Appended to the label className attribute.

errorClassName#

string

Appended to the error paragraph className attribute.

wrapperClassName#

string

Appended to the input wrapper className attribute.

info

Also accepts any prop that HTML input element supports.

Link#

import React from "react";
import { Link } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Link href="#">Link</Link>
</div>
);
};

Props#

href#

string

The anchor tag href.

isButton#

boolean

Sets the anchor role as button.

className#

string

Appended to the anchor tag className attribute.

info

Also accepts any prop that anchor element supports.

Select#

import React from "react";
import { Select } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Select>
<option value="1" selected>
option 1
</option>
<option value="2">option 2</option>
</Select>
</div>
);
};

Props#

label#

string

The input label.

required#

boolean

Adds a "*" beside the label.

id#

string

Input id, also added to the htmlFor label attribute.

error#

string

Will add an error paragraph at the bottom of the input & display the error styling.

errorId#

string

The error paragraph id.

className#

string

Appended to the input field className attribute.

labelClassName#

string

Appended to the label className attribute.

errorClassName#

string

Appended to the error paragraph className attribute.

wrapperClassName#

string

Appended to the select wrapper className attribute.

info

Also accepts any prop that HTML input element supports.

Modal#

Used to create custom modals.

import React from "react";
import { Modal, ModalBody, ModalFooter } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomModal = () => {
return (
<div className="pelcro-root">
<Modal id="custom modal">
<ModalBody>Body</ModalBody>
<ModalFooter>Footer</ModalFooter>
</Modal>
</div>
);
};
CustomModal.viewId = "custom-modal";

Props#

id#

string

Modal container id attribute, also used in analytics to identify the modal.

onDisplay#

() โ‡’ void

Callback function called when the modal is first displayed.

onClose#

() โ‡’ void

Callback function called when the modal is closed.

className#

string

Appended to the modal container className attribute.

hideCloseButton#

boolean

Hides the modal's close button when true.

Notification#

Show a toast notification. this component is a wrapper around react-hot-toast's Toaster component, and the notify function is an alias for it's toast function.

If you're using the PelcroModalController then you can add the Notification component as a child component, and then you can call notify anywhere, even outside React, to show a notification

import React from "react";
import { Notification } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomNotification = ({ children }) => {
return (
<Notification position="top-right" reverseOrder={true}>
{children}
</Notification>
);
};
/*
if you're using PelcroModalController you'll need to a add a viewId of "notification" because this is how the PelcroModalController component internally recognizes the Notification component to render
*/
CustomNotification.viewId = "notification";

Props#

see react-hot-toast docs

Tooltip#

import React from "react";
import { Tooltip } from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<div className="pelcro-root">
<Tooltip value="This is a tip for you" />
</div>
);
};

Props#

value#

string

The value displayed when hovering on the tooltip icon.

className#

string

Appended to the tooltip container className attribute.