React-use-observe-changes NPM

useObserveChanges

The useObserveChanges is a custom React hook that observes changes in specific fields and updates the associated state. It is particularly useful for tracking and managing the state of multiple fields efficiently within a React component.

Features

Dynamic State Tracking: Tracks specific fields dynamically across multiple instances.
Lightweight: Efficiently handles state with minimal overhead.
Flexible API: Supports observing, unobserving, and resetting fields dynamically.

Installation

Install the package via npm:

npm install react-use-observe-changes

Usage

To use useObserveChanges, import the hook into your component:

Basic Example

import React from 'react';
import useObserveChanges from 'react-use-observe-changes';

const MyComponent = () => {
    const { observeFieldOf, getInstance } = useObserveChanges();

    const handleFirstnameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        observeFieldOf('person', 'firstName', e.target.value);
    };

    const handleLastnameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        observeFieldOf('person', 'lastName', e.target.value);
    };

    return (
        <div>
            <input name="firstName" onChange={handleFirstnameChange} placeholder="First Name" />
            <input name="lastName" onChange={handleLastnameChange} placeholder="Last Name" />
            <pre>{JSON.stringify(getInstance('person'), null, 2)}</pre>
        </div>
    );
};

export default MyComponent;

API

`useObserveChanges(logLevelDesc?: string)`

A hook that observes changes in specific fields and updates the associated state.

Methods:

getInstance(instance: string): object | undefined Retrieves the state of a registered instance.
observeFieldOf(instance: string, field: string, value: any): void Observes changes in a specific field of an instance.
unobserveFieldOf(instance: string, field: string): void Stops observing a specific field of an instance.
reset(): void Resets the state of all observed instances.

Examples

Observing Changes in a Field

const { observeFieldOf, getInstance } = useObserveChanges();

// Observe changes in a specific field
observeFieldOf('user', 'name', 'John');

// Retrieve the state of the instance
console.log(getInstance('user')); // { name: 'John' }

Removing an Observed Field

const { observeFieldOf, unobserveFieldOf, getInstance } = useObserveChanges();

observeFieldOf('user', 'name', 'John');
unobserveFieldOf('user', 'name');

console.log(getInstance('user')); // {}

Resetting the State

const { observeFieldOf, reset, getInstance } = useObserveChanges();

observeFieldOf('user', 'name', 'John');
reset();

console.log(getInstance('user')); // undefined

Visual Overview

What is useObserveChanges?

What is useObserveChanges

Core Features

How to Use

Notes

The state is stored in memory and persists as long as the component using the hook is mounted.
The hook supports multiple instances and multiple fields per instance.
There is no explicit limit to the number of instances or fields, but excessive use may impact performance.

Contribution

Contributions are welcome! Follow these steps to contribute: 1. Fork the repository. 2. Create a new branch for your feature (git checkout -b feature-name). 3. Commit your changes (git commit -m "Add new feature"). 4. Push the branch (git push origin feature-name). 5. Open a pull request.