@tiny-codes/react-easy

English | 中文 | Changelog

Practical React components, hooks, and utilities built around Ant Design.

Overview

@tiny-codes/react-easy is a TypeScript React library that packages:

• Ant Design oriented UI components for common product workflows
• reusable hooks for state, validation, communication, and interaction
• utility helpers for browser and Node-friendly data handling

Demo: https://shijistar.github.io/react-easy

The library is published as:

• CommonJS: lib/
• ESM: es/
• types: lib/index.d.ts

Shipped JavaScript target: ES2016

Highlights

• Global ConfigProvider with localization support and shared defaults
• confirm / delete-confirm / modal action abstractions for repetitive dialogs
• form-oriented helpers such as withModalAction, EditableText, and validation hooks
• table and layout helpers such as ColumnSetting, OverflowTags, and FloatDrawer
• communication hooks such as useSSE and useStompSocket
• browser-friendly helpers for base64, crypto, strings, streams, and math

Installation

Install the package and required peer dependencies:

npm install @tiny-codes/react-easy react react-is antd i18next

Or with other package managers:

pnpm add @tiny-codes/react-easy react react-is antd i18next

yarn add @tiny-codes/react-easy react react-is antd i18next

bun add @tiny-codes/react-easy react react-is antd i18next

Compatibility

• react >= 16.8.0
• react-is >= 16.8.0
• antd >= 5.1.0
• i18next >= 8.4.0

Notes:

• Peer dependencies must be installed by the consuming app.
• Output code targets ES2016, so your bundler/runtime should support it.

Get Started

Click https://shijistar.github.io/react-easy to see all features in action.

1. Wrap your app

import{ConfigProvider}from'@tiny-codes/react-easy';import{useTranslation}from'react-i18next';functionRoot(){const{ t, i18n }=useTranslation();return(<ConfigProviderlang={i18n.language}localize={t}defaultConfirmTitle="common.confirm"defaultConfirmContent="common.confirm.content"defaultDeletionConfirmTitle="common.deleteConfirm"defaultDeletionConfirmContent="common.deleteConfirm.content"><App/></ConfigProvider>);}

2. Use action components

import{ConfirmAction,DeleteConfirmAction}from'@tiny-codes/react-easy';functionDangerZone(){return(<><ConfirmAction.ButtononOk={()=>console.log('confirmed')}>Enable feature</ConfirmAction.Button><DeleteConfirmAction.ButtononOk={()=>console.log('deleted')}>Delete item</DeleteConfirmAction.Button></>);}

3. Turn a form into a modal action

import{typeFormCompPropsConstraint,withModalAction}from'@tiny-codes/react-easy';import{Form,Input}from'antd';typeUser={name: string};typeUserFormProps={data?: User};functionUserForm(props: UserFormProps&FormCompPropsConstraint<User>){const{ form, data, onSave }=props;onSave(async(values)=>{awaitapi.save(values);});return(<Formform={form}initialValues={data}><Form.Itemname="name"label="Name"><Input/></Form.Item></Form>);}constUserModalAction=withModalAction(UserForm);

4. Use stable callback and validator hooks

import{useRefFunction,useValidators}from'@tiny-codes/react-easy';import{Form,Input}from'antd';functionDemo(){const{ email, codeMax20 }=useValidators();consthandleSubmit=useRefFunction(()=>{console.log('stable callback');});return(<FormonFinish={handleSubmit}><Form.Itemname="email"rules={[{validator: email}]}><Input/></Form.Item><Form.Itemname="code"rules={[codeMax20]}><Input/></Form.Item></Form>);}

Exported API

Components

• BreakLines
• ColumnSetting
• ConfigProvider
• ConfirmAction
• ContextMenu
• DeleteConfirmAction
• EditableText
• EllipsisParagraph
• EllipsisText
• EllipsisTitle
• EllipsisLink
• FloatDrawer
• FormItemControl
• Iconfont
• Loading
• ModalAction
• OverflowTags
• PulseAnimation
• VirtualTextViewer
• ReactEasyContext
• withConfirmAction
• withDeleteConfirmAction
• withModalAction
• withDefaultConfirmActionProps
• withDefaultModalActionProps

Hooks

• useAudioPlayer
• useDebounce
• useLocalStorage
• useMovable
• useProcessingText
• useRefFunction
• useRefValue
• useRowSelection
• useSplitter
• useSSE
• useStompSocket
• useStreamDownloader
• useUserMedia
• useValidators
• useValidator
• useValidatorBuilder

Utilities

• AudioPlayer
• base64
• color
• crypto
• math
• stream
• StreamDownloader
• string

Development

Install dependencies:

npm install

Common commands:

npm run build
npm run build-core
npm run storybook
npm run build-storybook
npx tsc -p tsconfig.json --noEmit
npx eslint src .storybook scripts --ext .ts,.tsx,.js,.jsx
npx prettier . --check

Notes for contributors:

• Source code lives in src/.
• lib/ and es/ are generated outputs.
• Storybook is the main local playground for components and docs.
• Jest is installed, but this repository may not always contain committed test files/config.

License

MIT