React-simple-extra NPM

react-simple-extra

A collection of miscellaneous components I use within my projects

Install

npm i -D react-simple-extra

Usage

Breadcrumbs

This is a navigation component which shows the current path a user is withing your app. It also allows navigation to previous paths.

import { Breadcrumbs, BreadcrumbItem } from "react-simple-extra";

export const MyPage = () => {
    return (
        <div>
            <Breadcrumbs onRedirect={action("Breadcrumbs redirect")}>
                <BreadcrumbItem to="/path/to/1">Home</BreadcrumbItem>
                <BreadcrumbItem to="/path/to/2">Organizations</BreadcrumbItem>
                <BreadcrumbItem to="/path/to/3">Training Programs</BreadcrumbItem>
                <BreadcrumbItem to="/path/to/4">Registered programs</BreadcrumbItem>
                <BreadcrumbItem>Teachers</BreadcrumbItem>
            </Breadcrumbs>
        </div>
    );
};

The props for the Breadcrumb component are show below:

Prop	Type	Description
`onRedirect`	`(path: string) => void`	A function that is called when any of the breadcrumb child items is clicked. It is passed the path of that item. You can then put your specific routing process in this function
`children`	`any`	The children of the `Breadcrumb` should be one or more `BreadcrumbItem` component(s)

The props from the BreadcrumbItemcomponent are show below:

Prop	Type	Description
`to`	`string`	The path to be redirected to when clicked. If not specified, clicking is disabled for that `BreadcrumbItem`
`children`	`any`	The child of the `BreadcrumbItem`

The component also allows customization by way of CSS variables. These are described in the table below:

Variable	Description
`--simple-breadcrumb-item-bg`	The default background color of each breadcrumb item
`--simple-breadcrumb-item-color`	The default text color of each breadcrumb item
`--simple-breadcrumb-item-first-bg`	The background color of the first breadcrumb item
`--simple-breadcrumb-item-hover-bg`	The background color of each breadcrumb item when the cursor is over it
`--simple-breadcrumb-item-active-bg`	The background color of the last breadcrumb item
`--simple-breadcrumb-item-active-color`	The text color of the last breadcrumb item

ConfirmModal

A convenience component that displays a modal requesting for confirmation from the user before executing some specified function

import { ConfirmModal } from "react-simple-extra";

export const MyPage = () => {
    return (
        <div>
            <ConfirmModal
                isLoading={false}
                classes={["btn btn-primary btn-sm", "btn btn-primary btn-block", "btn btn-link btn-block"]}
                content={["Start", "Confirm start", "Cancel"]}
                onConfirm={action("Start confirmed")}
            />
        </div>
    );
};

The props for this component are show below:

Prop	Type	Description
`classes`	`[string, string, string]`	A list of CSS classes for each button assigned in the order of the trigger button, the confirm button and the cancel button
`content`	`[any, any, any]`	A list of JSX content for each button assigned in the order of the trigger button, the confirm button and the cancel button
`isLoading`	`boolean`	When true, the buttons are disabled and a loading indicator is displayed. This is useful if the component is used to trigger a long-running action (E.g. a network action)
`loadingMessage`	`any`	Text to display by the loading indicator. Defaults to "Please wait..."
`expandOnRender`	`boolean`	If true, the component will be in its triggered state when it renders. Defaults to `false`
`onConfirm`	`() => void`	The function that is called when the confirm button is clicked