use-route-layer v1.0.1

use-route-layer

This library is a react hook library that facilitates layer management. It can easily control layer displayed through the browser's backward or forward functions by mapping layer information displayed on the screen to URL information.

A greeting Layer is displayed or not displayed depending on the URL change.

Installation

The easiest way to install use-route-layer is with npm.

npm install use-route-layer

Alternately, download the source.

git clone https://github.com/stegano/use-route-layer.git

Features

const useRouteLayer = (
  /**
   * Layer component to be displayed on the screen.
   */
  $component: JSX.Element| null = null,
  /**
   * URL information including QueryString.
   */
  url: string = '',
  /**
   * The name of the queryParameter to use as the `layerName`.
   */
  qsLayersName: string = '__layers__',
  /**
   * The name to use as the `layerId` value.
   */
  qsLayerId: string = 'layerId',
  /**
   * Bind a pushState function that can change the browser URL.
   */
  pushFn: (url: string) => any,
  /**
   * Binds a function that can call the browser back function.
   */
  backFn: () => any,
) : [
  JSX.Element | null,
  Function,
  Function,
  boolean
] => {
  ...
return [
    /**
     * It is a `LayerComponent` entered as a factor. This component may or may not be displayed depending on the URL state.
     */
    LayerComponent, 
    /**
     * Changes the URL state so that the `LayerComponent` can be displayed on the screen.
     */
    showLayer, 
    /**
     * Change the URL state so that the layer does not appear on the screen.
     */
    closeLayer, 
    /**
     * Whether the layer component is displayed or not.
     */
    isShowLayer
  ];
};

Usage

for React

// use-route-layer-for-react.ts

import { useHistory, useLocation } from 'react-router-dom';
import useRouteLayer from 'use-route-layer';

const useRouteLayerForNextjs = (
  $layerComponent: JSX.Element | null = null,
  url: string,
  qsLayersName: string = 'layersName',
  qsLayerId: string = 'myLayerId',
) => {
  const location = useLocation();
  return useRouteLayer(
    $layerComponent,
    location.search,
    qsLayersName,
    qsLayerId,
    (urlWithQuery: string) => {
      useHistory.go(urlWithQuery);
    }, useHistory.goBack,
  )
};

export default useRouteLayerForNextjs;

for Next.js

// use-route-layer-for-nextjs.ts

import { useRouter } from 'next/router';
import useRouteLayer from 'use-route-layer';

const useRouteLayerForNextjs = (
  $layerComponent: JSX.Element | null = null,
  url: string,
  qsLayersName: string = 'layersName',
  qsLayerId: string = 'myLayerId',
) => {
  const router = useRouter();
  return useRouteLayer(
    $layerComponent,
    router.asPath,
    qsLayersName,
    qsLayerId,
    (urlWithQuery: string) => {
      router.push(urlWithQuery, undefined, {
        shallow: true,
      });
    }, router.back,
  );
}

export default useRouteLayerForNextjs;

Using in Component

// component.tsx

import React from 'react';
import useRouteLayer from 'src/hooks/use-route-layer-for-nextjs' or 'src/hooks/use-route-layer-for-rejct';
...
import EventLayer from 'src/layers/event';
const Component = () => {
  const [
    $layerComponent, showLayer, closeLayer
  ] = useRouteLayer(
    <EventLayer/>, 'layersName', 'event',
  );

  const handleClickShowLayer = () => {
    /**
     * When the code below is executed, your browser URL will be `/?layersName=event` and the `EventLayer` component displayed.
     */
    showLayer();
  };

  const handleClickCloseLayer = () => {
    /**
     *  When the code below is executed, `/?layersName=event` will be removed from your browser URL, and `EventLayer` component will not be displayed.
     */
    closeLayer();
  };

  return (
    ...
    {$layerComponent}
    ...
  )
};