React Hooks

Reusable React Hooks

Installation

You can install it by npm package.

// With npm
npm install @sigeo/react-hooks

// With yarn
yarn add @sigeo/react-hooks

Hooks

• Force Update
• Fullscreen
• Map hooks
  • Selected elements

Force update

The useForceUpdate hook allow you to force component re-rendering (old this.forceUpdate() on React class component). It export a function.

import React from "react"
import useForceUpdate from "@sigeo/react-hooks/dist/forceUpdate"

function Main() {
  const [count, setCount] = React.useState(0)
  const forceRender = useForceUpdate();

  React.useEffect(() => {
    setCount(count++);
  })

  return (
    <div>
      <p>Rendering count: {count}</p>
      <button onClick={forceRender}>
        Click for re-rendering component!
      </button>
    </div>
  )
}

Fullscreen

The useFullscreen hook allow you to use and monitoring the component's full screen mode. It export two functions:

• isFullScreenMode: a boolean for check if the full screen mode is enabled/disabled
• requestFullscreen: a function for enable the full screen mode. It accept an element ID

import React from "react"
import useFullscreen from "@sigeo/react-hooks/dist/fullscreen"

const TARGET_ID = "test"

function Main() {
  const { isFullScreenMode, requestFullscreen } = useFullscreen()

  return (
    <div id={TARGET_ID}>
      <p>Full screen mode: {isFullScreenMode}</p>
      <button onClick={() => requestFullscreen(TARGET_ID)}>
        Enable it!
      </button>
    </div>
  )
}

Map Selected elements

The useSelectedElements hooks allow you to use and monitoring selected elements in the map, refreshing a component when an element is selected/deselected. It accept a selection interaction element and return an array of elements

import React from "react"
import useSelectedElements from "@sigeo/react-hooks/dist/selected"

function Main() {
  // Start the map!
  // ...
  // ...
  // const selection = new Select() 
  const elements = useSelectedElements(selection)

  return (
    <div>
      <p>Selected elements: {elements.length}</p>
    </div>
  )
}

License

Copyright © 2020 Sigeo S.R.L

Licensed under a GPL3+ license: http://www.gnu.org/licenses/gpl-3.0.txt