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.