Getting Started
Learn how to install and use Data Structure React Hooks in your project.
Installation
Install the package using npm, yarn, or pnpm:
npm install data-strcture-react-hooksBasic Usage
Import the hooks you need and use them in your React components:
import { useArray, useMap, useSet, useQueue, useStack } from 'data-strcture-react-hooks';
function MyComponent() {
const array = useArray([1, 2, 3]);
const map = useMap([['key1', 'value1']]);
const set = useSet([1, 2, 3]);
return (
<div>
<button onClick={() => array.push(4)}>Add to Array</button>
<button onClick={() => map.set('key2', 'value2')}>Add to Map</button>
<button onClick={() => set.add(4)}>Add to Set</button>
</div>
);
}Key Features
- Automatic Re-rendering: All mutations automatically trigger component re-renders
- Native API: Use familiar methods like push, pop, set, delete, etc.
- TypeScript Support: Full TypeScript support with proper type inference
- Zero Configuration: Works out of the box with no setup required
Quick Examples
useArray
const array = useArray([1, 2, 3]);
// These operations will trigger re-renders
array.push(4); // [1, 2, 3, 4]
array.pop(); // [1, 2, 3]
array.splice(1, 1); // [1, 3]
array.reverse(); // [3, 1]useMap
const map = useMap([['a', 1], ['b', 2]]);
// These operations will trigger re-renders
map.set('c', 3); // Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }
map.delete('a'); // Map(2) { 'b' => 2, 'c' => 3 }
map.clear(); // Map(0) {}useSet
const set = useSet([1, 2, 3]);
// These operations will trigger re-renders
set.add(4); // Set(4) { 1, 2, 3, 4 }
set.delete(1); // Set(3) { 2, 3, 4 }
set.clear(); // Set(0) {}Next Steps
Now that you have the basics, explore the individual hooks to learn more about their specific APIs and use cases: