feature-react
v0.0.32
Published
ReactJs extension features for feature-state
Downloads
150
Readme
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
useGlobalState()
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 { useGlobalState } from 'feature-react/state';
const $tasks = createState<Task[]>([]);
export const Tasks = () => {
const tasks = useGlobalState($tasks);
return (
<ul>
{tasks.map(task => <li key={task.id}>{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 inlocalStorage
.
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.