Koi Pool is a React-based components library that offers a flexible and easy-to-use set of components for creating and managing a variety of components in React applications. With full TypeScript support, it provides type-safe props and an intuitive API to enhance developer productivity and ensure robust application development. It has styles that are inheritedly fitting for the koi foundation brand.
To integrate Koi Pool into your project, ensure you have React and TypeScript set up. Then, install the library using either npm or yarn:
npm install koi-pool
# or
yarn add koi-pool
A foundational modal component providing essential functionality.
handleClose: () => void // Function to close the modal.
isOpen: boolean // Indicates if the modal is visible.
children: ReactNode // Content displayed inside the modal.
modalAttributes?: HTMLAttributes<HTMLDivElement> // Additional HTML attributes for the modal.
import { GenericModalBase } from 'koi-pool';
<GenericModalBase isOpen={isOpen} handleClose={handleClose}>
<p>Modal content</p>
</GenericModalBase>
Extends GenericModalBase with a title and action buttons.
// Inherits GenericModalBaseProps.
title: ReactNode // Title of the modal, can either be a string which will become a h1, or any other React Node
actionButtons?: ReactNode[] // Action buttons for the modal.
actionGroupAttributes?: HTMLAttributes<HTMLDivElement> // Customizes the button groups div attributes
bodyAttributes?: HTMLAttributes<HTMLDivElement> // Customizes the body wrapping the children's div attributes
cardAttributes?: HTMLAttributes<HTMLDivElement> // Customizes the card of the modal div attributes
import { GenericModal, Button } from 'koi-pool';
<GenericModal
isOpen={isOpen}
handleClose={handleClose}
title="Modal Title"
actionButtons={[
<Button onClick={actionHandler}>Action</Button>
]}>
<p>Modal content</p>
</GenericModal>
A specialized modal for acceptance actions, extending GenericModal.
// Includes all GenericModalProps excluding actionButtons prop.
handleSubmit: () => void // Function for submission action.
import { GenericAcceptanceModal } from 'koi-pool';
<GenericAcceptanceModal
isOpen={isOpen}
handleClose={handleClose}
handleSubmit={handleSubmit}
title="Confirm Submission"
>
<p>Confirm submission?</p>
</GenericAcceptanceModal>
A versatile modal component that supports tabbed navigation for organizing content into separate sections.
// Inherits properties from GenericModalProps except for children and title.
tabs: GenericModalTabsProps[] // An array of tab objects, each containing title, body, and optional actionButtons.
GenericModalTabsProps
title: string // the title for the tab, what the user will click on
body: ReactNode // the content of that tab
actionButtons?: ReactNode[] // The action buttons at the bottom of the modal, optional
import { GenericModalWithTabs } from 'koi-pool';
const tabs = [
{
title: "Tab 1",
body: <p>Content for Tab 1</p>,
},
{
title: "Tab 2",
body: <p>Content for Tab 2</p>,
actionButtons: [<Button>Button 2</Button>]
},
];
<GenericModalWithTabs
isOpen={isOpen}
handleClose={handleClose}
tabs={tabs}
/>
This component renders a modal with tabbed navigation at the top. Users can switch between tabs to view different content sections. Each tab can have its own set of action buttons, or none at all.
A button component for displaying icons.
// Any default Button html attributes
className?: string // Custom class name.
variants?: 'standard' | 'disabled'.
src: string // Image source URL.
alt?: string // Image alt text.
isActive? boolean // Active state indicator.
import { IconButton } from 'koi-pool';
import icon from './icon-path'
<IconButton src={icon} alt="Icon" />
A button specifically designed for closing or dismissing content.
// Any default Button html attributes
className?: string // Custom class name.
import { CloseButton } from 'koi-pool';
<CloseButton />
A flexible button component supporting various states and variants.
// Any default Button html attributes
className?: string // Custom class name.
variants?: 'cancel' | 'standard' | 'disabled'.
children: ReactNode // Button content.
isActive?: boolean // Active state indicator.
#####Usage
import { Button } from 'koi-pool';
<Button variants="cancel">Cancel</Button>