@synapsecloud/lib-react

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.

npm i @synapsecloud/lib-react

Usage

Hooks

useSet

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

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

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

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

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