Handy-react-hooks NPM

[

Handy React Hooks

My personal custom hooks and a compilation of comunity custom hooks

Prerequisites

This project requires NodeJS (version 14.16.1 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
7.19.1
v14.16.1

Babel Custom Hooks(#Babel Custom Hooks)

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

BEFORE YOU INSTALL: please read the prerequisites

Start with cloning this repo on your local machine:

$ git clone https://github.com/Sstark97/handy-react-hooks
$ cd PROJECT

To install and set up the library, run:

$ npm install -S myLib

Or if you prefer using Yarn:

$ yarn add --dev myLib

Usage

useFetch

useFetch(url: string = '', config: object)

Options

url

Type	Default value
string	''

If present, the request will be performed as soon as the component is mounted

Example:

const FetchComponent = () => {
  const { data, error, loading } = useFetch(
    "https://api.icndb.com/jokes/random"
  );

  if (error) {
    return <p>Error</p>;
  }

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="App">
      <h2>Chuck Norris Joke of the day</h2>
      {data && data.value && <p>{data.value.joke}</p>}
    </div>
  );
};

config

Type	Default value	Description
Object	null	Fecth optional Config

If present, the request will be use the optional config

Example:

const FetachComponent = () => {
  const { data, error, loading } = useFetch(
    "https://api.icndb.com/jokes/random",
    {
      method: "POST",
      body: {
        name: "I'm POST",
      },
    }
  );

  if (error) {
    return <p>Error</p>;
  }

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="App">
      <h2>Chuck Norris Joke of the day</h2>
      {data && data.value && <p>{data.value.joke}</p>}
    </div>
  );
};

useNearScreen

useNearScreen();

Description

You can use these hook to know if an html element is inside the viewport, and the hook returns a in the show variable true if the element is inside the viewport and a reference to it.

useLocalStorage

useLocalStorage(key: string = '', initialValue: any)

Options

key

Type	Default value
string	''

initialValue

Type	Default value	Description
any	null	initialValue to save

Example:

const LocalStorageComponent = () => {
  const { storedValue, error, setLocalStorage } = useLocalStorage("test", "These is a test");

  if (error) {
    return <p>Error</p>;
  }

  return (
    <div className="App">
      <h2>Chuck Norris Joke of the day</h2>
      {storedValue}</p>}
    </div>
  );
};

useSessionStorage

useSessionStorage(key: string = '', initialValue: any)

Options

key

Type	Default value
string	''

initialValue

Type	Default value	Description
any	null	initialValue to save

Example:

const SessionStorageComponent = () => {
  const { storedValue, error, setSessionStorage } = useSessionStorage("test", "These is a test");

  if (error) {
    return <p>Error</p>;
  }

  return (
    <div className="App">
      <h2>Chuck Norris Joke of the day</h2>
      {storedValue}</p>}
    </div>
  );
};