README.md

feature-react is the ReactJs extension for the feature-state and feature-form library, providing hooks and features for easy state management in ReactJs.

• Lightweight & Tree Shakable: Function-based and modular design (< 1KB minified)
• Modular & Extendable: Easily extendable with features like withLocalStorage(), ..
• Seamless Integration: Designed to work effortlessly with feature-state
• Typesafe: Build with TypeScript for strong type safety

feature-state

📖 Usage

useFeatureState()

A hook to bind a feature-state state to a React component, causing the component to re-render whenever the state changes.

import { createState } from 'feature-state';
import { useFeatureState } from 'feature-react/state';

const $tasks = createState<Task[]>([]);

export const Tasks = () => {
	const tasks = useFeatureState($tasks);

	return (
		<ul>
			{tasks.map((task) => (
				<li>{task.title}</li>
			))}
		</ul>
	);
};

📙 Features

withLocalStorage()

Adds persistence functionality to the state, using localStorage to save and load the state.

import { createState } from 'feature-state';
import { withLocalStorage } from 'feature-react';

const state = withLocalStorage(createState([]), 'tasks');

await state.persist();

state.set([..., state.get(), { id: 1, title: 'Task 1' }]);

• key: The key used to identify the state in localStorage.

withGlobalBind()

Binds a value to the global scope, using globalThis to make the value accessible globally.

import { withGlobalBind } from 'feature-global';

// Define a value to be bound globally
const $state = createState([]);

// Bind the value to the global scope
withGlobalBind('_state', $state);

// Now `$state` is accessible globally
console.log(globalThis._state); // { /* $state */ }

• key: The key used to identify the value in the global scope.
• value: The value to be bound to the global scope.

feature-form

📖 Usage

useForm()

A hook to manage form state and behavior in a React component, providing utilities to register form fields, handle form submission, and track field status.

import React from 'react';
import { useForm } from 'feature-react/form';
import { createForm } from 'feature-form';

interface TFormData {
    name: string;
    email: string;
}

const $form = createForm<TFormData>({
    fields: {
        name: { defaultValue: '' },
        email: { defaultValue: '' }
    }
});

export const MyFormComponent: React.FC = () => {
    const { register, handleSubmit, field, status } = useForm($form);

    const onSubmit = handleSubmit({
        onValidSubmit?: (formData) => {
            console.log('Form submitted successfully:', formData);
        },
        onInvalidSubmit?: (errors) => {
            console.error('Form submission failed:', errors);
        }
    });

    return (
        <form onSubmit={onSubmit}>
            <div>
                <label>Name</label>
                <input {...register('name')} />
                {status('name').error && <span>{status('name').error}</span>}
            </div>
            <div>
                <label>Email</label>
                <input {...register('email')} />
                {status('email').error && <span>{status('email').error}</span>}
            </div>
            <button type="submit">Submit</button>
        </form>
    );
};

• register(formFieldKey, controlled?): Registers a form field with the given key, optionally as a controlled component.
• handleSubmit(options?): Returns a function to handle form submission with optional configuration for preventing default behavior and including additional data.
• field(formFieldKey): Retrieves the form field object for the given key.
• status(formFieldKey): Retrieves the status of the form field for the given key.