Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/idootop/xsta
⚡ An ultra-lightweight (<200 lines) React state management solution with zero learning curve and migration costs.
https://github.com/idootop/xsta
react-state-management tiny typscript zustand
Last synced: 3 months ago
JSON representation
⚡ An ultra-lightweight (<200 lines) React state management solution with zero learning curve and migration costs.
- Host: GitHub
- URL: https://github.com/idootop/xsta
- Owner: idootop
- License: mit
- Created: 2023-11-12T07:38:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-18T04:41:04.000Z (8 months ago)
- Last Synced: 2024-10-04T11:09:39.038Z (3 months ago)
- Topics: react-state-management, tiny, typscript, zustand
- Language: TypeScript
- Homepage:
- Size: 253 KB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
⚡️ An ultra-lightweight React state management solution
Less than 200 lines of code, with zero learning curve and migration costs
[](https://github.com/idootop/xsta/blob/main/README.zh-CN.md) [](https://www.npmjs.com/package/xsta) [](https://www.npmjs.com/package/xsta) [](https://www.npmjs.com/package/xsta) [](https://github.com/idootop/xsta)
`XSta` is an ultra-lightweight (<200 lines) React state management solution that provides an intuitive `useState` Hook-like interface, offering a seamless state management experience with zero learning curve and migration cost.
## ✨ Highlights
- **🐦 Tiny yet Powerful** Less than 200 lines of code, a full-fledged React state management solution, battle-tested for production.
- **🧩 Zero Learning and Migration Costs** Just replace `useState` with `useXState`, and the local component state becomes instantly shareable across other components - it's that easy!
- **💪 Performance Optimized** Only re-render when component's subscribed state changes, effortlessly optimizing complex page performance.
## 📦 Installation
```bash
# With npm
npm install xsta
# With pnpm
pnpm install xsta
# With Yarn
yarn add xsta
```
## ⚡️ Get Started
Simply replace `useState` with `useXState` and provide a unique `key` to turn your local component state into a globally shareable state.
👉 Example
```typescript
import { useXState } from 'xsta';
export default function Counter() {
const [count, setCount] = useXState('count', 0); // It's that easy!
function handleClick() {
setCount(count + 1);
}
return (
You pressed me {count} times
);
}
```
You can also directly access and modify specific state from anywhere outside components using `XSta`.
When the external state changes, dependent components will automatically update.
👉 Example
```typescript
import { useXState, XSta } from 'xsta';
function externalFunction() {
const count = XSta.get('count');
XSta.set('count', count + 1);
}
export default function Counter() {
const [count, setCount] = useXState('count', 0);
return (
You pressed me {count} times
);
}
```
## 💎 Best Practices
To better manage state during development, it's common to encapsulate state-related operations by module.
`XStaManager` provides a basic state management interface for this purpose. Here's a simple example of `createXStaManager`.
👉 Example
```typescript
// counter.state.ts
import { createXStaManager } from 'xsta';
export const CounterState = createXStaManager({
key: 'count',
initialState: 0,
});
// Counter.ts
import { CounterState } from 'counter.state';
function externalFunction() {
CounterState.setState(count => count + 1);
}
export default function Counter() {
const [count] = CounterState.useState();
return (
You pressed me {count} times
);
}
```
Furthermore, you can extend `XStaManager` and provide a unified state management interface. **(Recommended)**
👉 Example
```typescript
// counter.state.ts
import { XStaManager } from 'xsta';
class _CounterState extends XStaManager {
key = 'count';
initialState = 0;
get oddOrEven() {
return this.getState() & 1 ? 'odd' : 'even';
}
increase = () => {
this.setState(count => count + 1);
};
decrease = () => {
this.setState(count => count - 1);
};
}
export const CounterState = new _CounterState();
// Counter.ts
import { CounterState } from 'counter.state';
export default function Counter() {
const [count] = CounterState.useState();
return (
<>
You pressed me {count} times
Count is {CounterState.oddOrEven}
Increase
Decrease
>
);
}
```
## ⚙️ Advanced
### XConsumer
If a component is computationally expensive to build, or if your state is a complex object with multiple components depending on different properties, you can wrap it with `XConsumer` and use a state selector to control when the child components should re-render.
👉 Example
```typescript
import { useXState, XConsumer } from 'xsta';
export default function UserProfile() {
const [profile, setProfile] = useXState('profile', {
avatar: 'https://github.com/fluidicon.png',
age: 18,
bio: 'hello world!',
});
console.log('UserProfile rebuild', profile);
return (
<>
s.avatar}>
{/* UserAvatar will only re-render when avatar changes */}
[s.age, s.bio]}>
{profile => {
// You can also directly access the current state value
return ;
}}
>
);
}
```
### useConsumer
`useXConsumer` is an alias for `useXState` that allows for more convenient subscription to state updates.
👉 Example
```typescript
import { useXConsumer } from 'xsta';
function WatchText() {
// This component will automatically re-render when myState.text changes
const [state] = useXConsumer('myState', s => s.text);
return
Current text: {state.text}
;
}
```
### Additional Features
`XSta` provides a few more utilities for advanced use cases:
- `useXProvider(key, initialState)`: Initializes a global state value.
- `XSta.delete(key)`: Deletes a global state value.
- `XSta.clear(key)`: Clears all global state values.
👉 Example
```typescript
import { useXState, useXProvider, XSta } from 'xsta';
const initialState = 0;
export default function APP() {
// Initialize state
useXProvider('count', initialState);
return (
<>
>
);
}
function Clear() {
return (
{
// Delete the "count" state
XSta.delete('count');
// Clear all states
XSta.clear();
}}
>
Clear
);
}
function CountViewer() {
const [count] = useXState('count');
return
You pressed me {count ?? initialState} times
;
}
function Increase() {
return (
{
XSta.set('count', XSta.get('count', initialState) + 1);
}}
>
Increase
);
}
```
Note: By default, `XSta` does not automatically initialize or clean up global states. Instead, developers decide when to initialize and destroy state values. Therefore, please be careful when using it to prevent issues like using an uninitialized state or memory leaks.