This package has been deprecated

Author message:

This package is no longer maintained. A new library has been put up by the author: react-simple-widgets which includes its functionality. For more information, contact the author at [e-mail]

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

Storybook

The project uses Storybook to visually test the components

To run these stories:

1. Clone the repository
2. Run npm install to install dependencies
3. Run npm run storybook to start the storybook server.

For more information on Storybook, click here

Maintainers

• Kwame Opare Asiedu

Support

If you'd like to support this project, you can do so by becoming a patreon on Patreon

It would be really helpful if you can star the project on Github