unifyedx-reactutils

License: MIT

A collection of useful utilities and helper functions for React applications, including methods for session and local storage management, cookie handling, lodash functions, common websocket and more...

Features

• Utility Functions: Methods to manage cookies, session storage, local storage.
• Lodash Integration: Exposes all Lodash methods for easy use.
• TypeScript Support: Includes types for all utility functions.
• Tree Shaking: Optimized for minimal bundle size using Webpack's tree shaking feature.
• Bundled with Webpack: Configured for easy integration into any React project.

Key Points for web socket supporting both Socket.IO-based real-time communication and a native WebSocket-based solution within the same library:

Socket.IO setup:

• SocketIOProvider: Context provider that initializes a Socket.IO client.
• useSocketIO: Hook to access the Socket.IO client instance.
• useSocketIOEvent: Hook to listen to Socket.IO events.
• useSocketIOEmit: Hook to emit Socket.IO events.

Native WebSocket setup:

• WebSocketProvider: Context provider that initializes a native WebSocket connection.
• useWebSocket: Hook to access the native WebSocket instance.
• useWebSocketMessage: Hook to listen for incoming messages.
• useWebSocketSend: Hook to send messages through the WebSocket.

Installation

To install the library, simply run:

npm install unifyedx-reactutils

Usage

Importing the library You can import the library in your React project to access its utilities:

import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage,
  setCookie,
  getCookie,
  deleteCookie,
  debounce,
} from 'unifyedx-reactutils';

Usage Examples

1. Managing Session and Local Storage

// Set, get, and remove session storage
setSessionStorage('key', 'value');
const sessionValue = getSessionStorage('key');
removeSessionStorage('key');

// Set, get, and remove local storage
setLocalStorage('key', 'value');
const localValue = getLocalStorage('key');
removeLocalStorage('key');

2. Cookie Handling

// Set, get, and delete cookies
setCookie('cookieName', 'cookieValue', { path: '/', maxAge: 3600 });
const cookieValue = getCookie('cookieName');
deleteCookie('cookieName');

3. Debounce utility

import { debounce } from 'unifyedx-reactutils';

// Example of using debounce utility for a function
const debouncedFunc = debounce(() => {
  console.log('Function debounced');
}, 300);

// Call the debounced function
debouncedFunc();

4. Using Socket.IO

import React from 'react';
import {
  SocketProvider,
  useSocketEvent,
  useSocketEmit,
} from 'unifyedx-reactutils';

const MyComponent = () => {
  const message = useSocketEvent < string > 'chat-message';
  const emit = useSocketEmit();

  return (
    <div>
      <h1>Chat Messages</h1>
      {message && <p>New message: {message}</p>}
      <button onClick={() => emit('chat-message', 'Hello from Microfrontend')}>
        Send Message
      </button>
    </div>
  );
};

const App = () => {
  return (
    <SocketProvider
      url="https://your-socket-server.com"
      options={{ auth: { token: 'Bearer my-token' } }}
    >
      <MyComponent />
    </SocketProvider>
  );
};

export default App;

5. Using Native WebSocket:

import React from 'react';
import {
  WebSocketProvider,
  useWebSocketMessage,
  useWebSocketSend,
} from 'unifyedx-reactutils';

const WebSocketExample = () => {
  const message = useWebSocketMessage();
  const send = useWebSocketSend();

  return (
    <div>
      <h2>Native WebSocket Echo</h2>
      <p>Received: {message}</p>
      <button onClick={() => send('Hello WebSocket')}>
        Send WebSocket Message
      </button>
    </div>
  );
};

const App = () => (
  <WebSocketProvider url="wss://ws.postman-echo.com/raw">
    <WebSocketExample />
  </WebSocketProvider>
);
// Method 1: If you want to pass the token then use
<WebSocketProvider url={`wss://example.com/socket?token=${yourToken}`}>
  <YourComponent />
</WebSocketProvider>;

//Method 2: to pass auth token as soon as the connection is successful
React.useEffect(() => {
  // Once the socket is open, send auth token
  if (socket && socket.readyState === WebSocket.OPEN) {
    send(JSON.stringify({ type: 'auth', token: yourToken }));
  }
}, [socket, send]);

5. Organized constant for api and non-api:

 - Separation of Concerns: Keeps API and non-API constants logically grouped.

- Scalability: Adding new MFEs or updating constants is straightforward.

- Discoverability: Consumers can easily find constants relevant to their MFE.

- Modular Imports: Consumers can import only the constants they need, reducing unused imports.