GPC-React

Collection of React tools for use at the GP Joule Connect team

Licence: Unlicensed, only for private use at GP Joule Connect GmbH

Table of Contents

1. Installation
2. Hooks
   • useWindowDimensions
   • useScreens
   • useSessionStorage

Installation

To use these hooks, install the gpc-react library:

npm install gpc-react

Hooks:

useWindowDimensions

useWindowDimensions provides the current window dimensions (width and height). It listens to the resize event and updates the values in real-time as the window size changes. If the window object is not available (e.g., server-side rendering), both width and height will be null.

Usage example:

import { useWindowDimensions } from 'gpc-react';

import BigComponent from './BigComponent'
import SmallComponent from './SmallComponent'
import TallComponent from './TallComponent'
import ShortComponent from './ShortComponent'

const VariableSizeComponent = () => {
  const { width, height } = useWindowDimensions();

  return (
    <div>
      {width > 1000 ?  <BigComponent /> : <SmallComponent>}
      {height > 500 ?  <TallComponent /> : <ShortComponent>}
    </div>
  );
};

export default VariableSizeComponent;

useScreens

useScreens helps detect common screen resolutions such as mobile, tablet, Full HD, 4K, and 8K. It provides boolean values for each screen size category, allowing you to conditionally render components based on the current screen width. The hook initializes screenSizes based on the current screen width and updates dynamically on window resize.

Returns

• isMobile: boolean — true if the width is 750 pixels or less.
• isTablet: boolean — true if the width is between 751 and 1024 pixels.
• isFullHD: boolean — true if the width is between 1025 and 1920 pixels.
• is4K: boolean — true if the width is between 1921 and 3840 pixels.
• is8K: boolean — true if the width is greater than 3840 pixels.

Usage Example:

import { useScreens } from 'gpc-react';

import MobileView from './MobileView';
import TabletView from './TabletView';
import FullHDView from './FullHDView';

const ResponsiveComponent = () => {
  const { isMobile, isTablet, isFullHD } = useScreens();

  return (
    <div>
      {isMobile && <MobileView />}
      {isTablet && <TabletView />}
      {isFullHD && <FullHDView />}
    </div>
  );
};

export default ResponsiveComponent;

useBrowserStorage

useBrowserStorage provides a convenient interface for interacting with both sessionStorage and localStorage. It allows you to set, retrieve, and remove items from browser storage, stringifying and parsing values to set and retrieve respectively. The parameter type (optional) selects which storage: "session" or "local", it defaults to "session" if nothing is given.

-Syntax:

  // Parameter types
  // key: string;
  // value: all objects;
  // type?: "session" | "local", defaults to "session";
  setItem(key, value, type?)
  getItem(key, type?)
  removeItem(key, type?)

Usage example:

import { useBrowserStorage } from 'gpc-react';

const StorageHandlingComponent = () => {
  const { value, setItem, getItem, removeItem } = useBrowserStorage();

  // Set an item in localStorage:
  setItem("myKey", { name: "Alice", age: 25 }, "local");

  // Retrieve the item:
  const user = getItem("myKey", "local");
  console.log(user); // Output: { name: "Alice", age: 25 }

  // Remove the item:
  removeItem("myKey", "local");

  // In sessionStorage:
  setItem("myKey", { name: "Alice", age: 25 });
  // Same as: setItem("myKey", { name: "Alice", age: 25 }, "session");
  getItem("myKey");
  removeItem("myKey");
}

export default StorageHandlingComponent;