@dxkit-org/react-js-kit
Version:
Modern TypeScript React utility library with tree-shaking support - Collection of React-specific utilities and Zustand helpers for TypeScript projects
225 lines (164 loc) โข 6.34 kB
Markdown
> **Modern TypeScript React utility library with tree-shaking support** - Collection of React-specific utilities and Zustand helpers for TypeScript projects.
[](https://www.npmjs.com/package/@dxkit-org/react-js-kit)
[](https://www.typescriptlang.org/)
[](https://opensource.org/licenses/MIT)
[](https://webpack.js.org/guides/tree-shaking/)
A collection of React-specific TypeScript utility functions for modern React development.
- ๐ **TypeScript Support** - Full TypeScript support with type definitions
- โ๏ธ **React Focused** - Designed specifically for React applications
- ๐ฆ **Tree Shakable** - Import only what you need
- ๏ฟฝ๏ธ **Zustand Utilities** - Enhanced Zustand store helpers
- ๐งช **Well Tested** - Comprehensive test coverage
- ๐ **Well Documented** - JSDoc comments for all functions
- ๐ง **Modern Build** - Built with tsup for optimal bundling
- ๐ก **Excellent IDE Support** - Full auto-completion and IntelliSense support
```bash
npm install @dxkit-org/react-js-kit zustand
```
**Alternative package managers:**
```bash
yarn add @dxkit-org/react-js-kit zustand
pnpm add @dxkit-org/react-js-kit zustand
bun add @dxkit-org/react-js-kit zustand
```
> **Note**: This package requires `zustand` as a peer dependency.
The `createZustandSelectors` function enhances your Zustand store with auto-generated selector hooks, providing a more convenient way to access individual state properties.
```typescript
import { create } from "zustand"
import { createZustandSelectors } from "@dxkit-org/react-js-kit/zustand"
// Define your store
interface CounterState {
count: number
increment: () => void
decrement: () => void
reset: () => void
}
const useCounterStoreBase = create<CounterState>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}))
// Enhance with selectors
export const useCounterStore = createZustandSelectors(useCounterStoreBase)
// Usage in components
function Counter() {
// Use individual selectors - only re-renders when count changes
const count = useCounterStore.use.count()
const increment = useCounterStore.use.increment()
const decrement = useCounterStore.use.decrement()
const reset = useCounterStore.use.reset()
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
<button onClick={reset}>Reset</button>
</div>
)
}
// You can still use the original store methods
function AnotherComponent() {
// This will re-render on any state change
const { count, increment } = useCounterStore()
// Or use selective subscription
const count = useCounterStore((state) => state.count)
return <div>Count: {count}</div>
}
```
1. **Performance**: Each selector only subscribes to its specific property, reducing unnecessary re-renders
2. **DX**: Clean, intuitive API with excellent TypeScript support
3. **Flexibility**: Can still use original store methods when needed
4. **Type Safety**: Full TypeScript inference for all selectors
You can import individual utilities for optimal tree-shaking:
```typescript
// Import specific utilities
import { createZustandSelectors } from "@dxkit-org/react-js-kit/zustand"
// Or import from the main entry point
import { createZustandSelectors } from "@dxkit-org/react-js-kit"
```
| Module | Functions | Description |
| --------- | ------------------------ | ------------------------------------- |
| `zustand` | `createZustandSelectors` | Enhanced Zustand store selector hooks |
For optimal compatibility with this package, ensure your `tsconfig.json` uses modern module resolution:
```json
{
"compilerOptions": {
"moduleResolution": "bundler", // or "node16"/"nodenext"
"module": "ESNext", // or "Node16"
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"jsx": "react-jsx" // for React projects
}
}
```
```typescript
function createZustandSelectors<S extends UseBoundStore<StoreApi<object>>>(
store: S
): S & { use: { [K in keyof T]: () => T[K] } }
```
**Parameters:**
- `store` - A Zustand store created with the `create` function
**Returns:**
- Enhanced store with `.use` property containing individual selector hooks
**Example:**
```typescript
interface UserState {
user: { name: string; email: string } | null
isLoading: boolean
login: (user: { name: string; email: string }) => void
logout: () => void
}
const useUserStoreBase = create<UserState>((set) => ({
user: null,
isLoading: false,
login: (user) => set({ user, isLoading: false }),
logout: () => set({ user: null, isLoading: false }),
}))
export const useUserStore = createZustandSelectors(useUserStoreBase)
// In components
function UserProfile() {
const user = useUserStore.use.user() // Only re-renders when user changes
const logout = useUserStore.use.logout()
if (!user) return <div>Not logged in</div>
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
<button onClick={logout}>Logout</button>
</div>
)
}
```
```bash
npm install
npm run build
npm run dev
npm run type-check
```
We welcome contributions! Please feel free to submit a Pull Request.
MIT