lib-react

Lib-React is a specialized software library designed to enhance the development experience for web applications utilizing the React.js framework. It provides a collection of robust helper functions that streamline common tasks faced by developers, allowing them to focus on building dynamic user interfaces rather than getting bogged down by repetitive coding patterns. lib-react promotes best practices by offering reusable components and hooks that help maintain clean, maintainable code. Its comprehensive documentation and active community support make it an invaluable resource for both novice and experienced developers looking to leverage the full potential of React.js in their projects. By integrating lib-react into their workflow, developers can save time, reduce errors, and deliver high-quality web applications more efficiently.

Installation

Use Node Package Manager npm to install lib-react.

1npm i @synapsecloud/lib-react

Usage

Hooks

useSet

1import { useSet } from '@synapsecloud/lib-react';
2
3function MyComponent(props) {
4  const { add, delete, clear, has, forEach, values, size } = useSet();
5  
6  return (
7    <div>
8      <button onClick={() => {
9        const a = size + 1; 
10        add(a);
11        console.log(has(a)); // true
12        
13        const b = a + 1;
14        add(b);
15        console.log(has(b)); // true
16
17        forEach(value => console.log(value.toString() + ', ')); // {a}, {b},
18
19        clear();
20      }}>Submit</button>
21    </div>
22  );
23}

useMap

1import { useMap } from '@synapsecloud/lib-react';
2
3function MyComponent(props) {
4  const { get, set, delete, clear, has, forEach, values, size } = useMap();
5  
6  return (
7    <div>
8      <button onClick={() => {
9        const a = size + 1; 
10        set(a, 'hello');
11        console.log(has(a)); // true
12        
13        const b = a + 1;
14        add(b, 'hello world!');
15        console.log(has(b)); // true
16
17        forEach((value, key) => console.log(key, value.toString() + ', ')); // {a} 'hello', {b} 'world!',
18
19        clear();
20      }}>Submit</button>
21    </div>
22  );
23}

useStack

1import { useStack } from '@synapsecloud/lib-react';
2
3function MyComponent(props) {
4  const { push, pop, clear, peek, includes, size } = useStack();
5  
6  return (
7    <div>
8      <button onClick={() => {
9        const a = size + 1; 
10        push(a);
11        console.log(includes(a)); // true
12        
13        const b = a + 1;
14        push(b);
15        console.log(includes(b)); // true
16
17        console.log(peek()); // {b}
18        console.log(pop()); // {b}
19
20        console.log(peek()); // {a}
21        console.log(pop()); // {a}
22
23        clear();
24      }}>Submit</button>
25    </div>
26  );
27}

useQueue

1import { useQueue } from '@synapsecloud/lib-react';
2
3function MyComponent(props) {
4  const { enqueue, dequeue, clear, peek, includes, size } = useQueue();
5  
6  return (
7    <div>
8      <button onClick={() => {
9        const a = size + 1; 
10        enqueue(a);
11        console.log(includes(a)); // true
12        
13        const b = a + 1;
14        enqueue(b);
15        console.log(includes(b)); // true
16
17        console.log(peek()); // {a}
18        console.log(dequeue()); // {a}
19
20        console.log(peek()); // {b}
21        console.log(dequeue()); // {b}
22
23        clear();
24      }}>Submit</button>
25    </div>
26  );
27}

useBrowserStorage

1import { useBrowserStorage } from '@synapsecloud/lib-react';
2
3function MyComponent(props) {
4  const { get, set, remove, updatedAt, key, version } = useBrowserStorage('my-key', '0.0.1');
5  
6  return (
7    <div>
8      <button onClick={() => {
9        console.log(get()); // null
10        console.log(set('my-data-as-a-string')); // 'my-data-as-a-string'
11        console.log(get()); // 'my-data-as-a-string'
12        console.log(remove()); // 'my-data-as-a-string';
13        console.log(get()); // null
14        
15      }}>Submit</button>
16    </div>
17  );
18}

License

MIT