@jinpill/react-libs

My personal react libraries.

Installation

# npm
npm i -D @jinpill/react-libs

# yarn
yarn add -D @jinpill/react-libs

# pnpm
pnpm add -D @jinpill/react-libs

Usage

Import and use the components or hooks in your project.

Components

Basic Components

| Name | Usage | | :----------------- | :----------------------------------------------------------------------------------- | | Card | This component is a simple card UI. | | Label | This component is a simple label UI. | | Tooltip | This component displays a tooltip when hovering over the child element. | | Scrim | This component is a simple scrim UI. | | Skeleton | This component is a simple and customisable skeleton UI. | | Icon | This component displays SVG icons based on the inputted source or preset name. | | TextNormalizer | This component splits the text by breaking lines and normalizes the text alignment. | | Ellipsis | This component truncates and displays content based on the length of the child text. | | BottomSheet | The mobile-style popup UI that comes up from the bottom of the screen. | | Panel | This component is a panel UI for options. |

Interactive Components

| Name | Usage | | :--------------- | :----------------------------------------------------------------------------------------- | | Chip | This component is a simple chip UI. | | Button | This component is a simple button UI. | | IconButton | This component is a simple icon button UI. | | Input | This component is a simple input UI. | | Dropdown | This component is a simple dropdown UI. | | Checkbox | This component is a simple checkbox UI. | | Radio | This component is a simple radio UI. | | ToggleButton | This component is a simple toggle button UI. | | ToggleSwitch | This component is a simple toggle switch UI. | | Options | This component displays a selectable options list at the top of the screen. | | Scrollbar | This component displays the same appearance of scrollbar regardless of the browser and OS. |

Hooks

| Name | Usage | | :----------------- | :------------------------------------------------------------------------------------- | | useStateRef | This hook returns a ref object refering to the state. | | useTimeout | This hook helps manage setTimeout easily in React. | | useInterval | This hook helps manage setInterval easily in React. | | useMountEffect | This hook helps animate components on mount and unmount. | | useCloneEffect | This hook duplicates component when changing states and helps animate cloned elements. |