@synapsecloud/lib-react/README.md

Helper library for web applications built on React Js

# 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](https://www.npmjs.com/) to install **lib-react**.

```bash
npm i @synapsecloud/lib-react
```

## Usage

### Hooks
#### useSet

```JSX
import { useSet } from '@synapsecloud/lib-react';

function MyComponent(props) {
  const { add, delete, clear, has, forEach, values, size } = useSet();
  
  return (
    <div>
      <button onClick={() => {
        const a = size + 1; 
        add(a);
        console.log(has(a)); // true
        
        const b = a + 1;
        add(b);
        console.log(has(b)); // true

        forEach(value => console.log(value.toString() + ', ')); // {a}, {b},

        clear();
      }}>Submit</button>
    </div>
  );
}
```

#### useMap

```JSX
import { useMap } from '@synapsecloud/lib-react';

function MyComponent(props) {
  const { get, set, delete, clear, has, forEach, values, size } = useMap();
  
  return (
    <div>
      <button onClick={() => {
        const a = size + 1; 
        set(a, 'hello');
        console.log(has(a)); // true
        
        const b = a + 1;
        add(b, 'hello world!');
        console.log(has(b)); // true

        forEach((value, key) => console.log(key, value.toString() + ', ')); // {a} 'hello', {b} 'world!',

        clear();
      }}>Submit</button>
    </div>
  );
}
```

#### useStack

```JSX
import { useStack } from '@synapsecloud/lib-react';

function MyComponent(props) {
  const { push, pop, clear, peek, includes, size } = useStack();
  
  return (
    <div>
      <button onClick={() => {
        const a = size + 1; 
        push(a);
        console.log(includes(a)); // true
        
        const b = a + 1;
        push(b);
        console.log(includes(b)); // true

        console.log(peek()); // {b}
        console.log(pop()); // {b}

        console.log(peek()); // {a}
        console.log(pop()); // {a}

        clear();
      }}>Submit</button>
    </div>
  );
}
```

#### useQueue

```JSX
import { useQueue } from '@synapsecloud/lib-react';

function MyComponent(props) {
  const { enqueue, dequeue, clear, peek, includes, size } = useQueue();
  
  return (
    <div>
      <button onClick={() => {
        const a = size + 1; 
        enqueue(a);
        console.log(includes(a)); // true
        
        const b = a + 1;
        enqueue(b);
        console.log(includes(b)); // true

        console.log(peek()); // {a}
        console.log(dequeue()); // {a}

        console.log(peek()); // {b}
        console.log(dequeue()); // {b}

        clear();
      }}>Submit</button>
    </div>
  );
}
```

#### useBrowserStorage

```JSX
import { useBrowserStorage } from '@synapsecloud/lib-react';

function MyComponent(props) {
  const { get, set, remove, updatedAt, key, version } = useBrowserStorage('my-key', '0.0.1');
  
  return (
    <div>
      <button onClick={() => {
        console.log(get()); // null
        console.log(set('my-data-as-a-string')); // 'my-data-as-a-string'
        console.log(get()); // 'my-data-as-a-string'
        console.log(remove()); // 'my-data-as-a-string';
        console.log(get()); // null
        
      }}>Submit</button>
    </div>
  );
}
```

## License

[MIT](https://choosealicense.com/licenses/mit/)