@lodado/namespace-core Summary

@lodado/namespace-core is a lightweight and flexible library designed for state management in React applications. It provides the NamespaceStore class, which serves as a foundational tool for creating custom state stores using JavaScript's Proxy API. By extending NamespaceStore, developers can define application state and actions in a structured and scalable manner.

more information >>

https://github.com/lodado/react-namespace/tree/publish

Key Features

• Lightweight: Adds minimal overhead to your application.
• Flexible State Management: Supports both global and local stores for versatile state handling.
• Proxy API Utilization: Leverages the Proxy API for efficient and reactive state management.
• TypeScript Support: Fully typed to enhance the developer experience with better tooling and error checking.

Usage

Creating a Namespace Store

To utilize @lodado/namespace-core, you start by creating a store class that extends NamespaceStore. This custom store will hold your application's state and provide methods to modify it.

1import { NamespaceStore } from '@lodado/namespace-core';
2
3interface AppState {
4  user: {
5    name: string;
6    email: string;
7  };
8  theme: 'light' | 'dark';
9}
10
11class AppStore extends NamespaceStore<AppState> {
12  constructor(initialState: AppState) {
13    super(initialState);
14  }
15
16  // Actions to modify the state
17  setUser(user: AppState['user']) {
18    this.state.user = user;
19  }
20
21  toggleTheme() {
22    this.state.theme = this.state.theme === 'light' ? 'dark' : 'light';
23  }
24}
25
26// Instantiate the global store
27const globalStore = new AppStore({
28  user: {
29    name: 'John Doe',
30    email: 'john.doe@example.com',
31  },
32  theme: 'light',
33});

Defining Actions

Within your extended NamespaceStore, you can define methods that act upon the state. These actions encapsulate the logic for updating state properties.

1class CounterStore extends NamespaceStore<{ count: number }> {
2  constructor() {
3    super({ count: 0 });
4  }
5
6  increment() {
7    this.state.count += 1;
8  }
9
10  decrement() {
11    this.state.count -= 1;
12  }
13}

When to Use

@lodado/namespace-core is particularly beneficial in the following scenarios:

• Design System Components: Ideal for developing reusable components within a design system.
• Complex Components: Manages state efficiently in large components like features, widgets, or pages.
• Recursive Structures: Handles nested components or tabs where mutual manipulation is necessary.
• External State Manipulation: Allows external components to interact with and manipulate internal state.

Installation

Install the package using npm or yarn:

1npm install @lodado/namespace-core
2# or
3yarn add @lodado/namespace-core

License

MIT License

---

By focusing on the core functionalities provided by @lodado/namespace-core, developers can create efficient and maintainable state management solutions tailored to their application's needs.