react-hooks-toolbox

React hooks toolbox

Usage no npm install needed!

<script type="module">
  import reactHooksToolbox from 'https://cdn.skypack.dev/react-hooks-toolbox';
</script>

README

react-hooks-toolbox

NPM version npm download

Collection of Hooks.

Install

Note: React 16.8+ is required for Hooks.

With npm

npm i react-hooks-toolbox

Or with yarn

yarn add react-hooks-toolbox

Run samples

  • Clone repository
  • yarn install or npm install
  • (This is only necessary for the examples with Axios) Install json-server npm i json-server or yarn add global json-server(Get a full fake REST API with zero coding in less than 30 seconds (seriously))
  • yarn run run:server
  • yarn run start

API

Hooks

Axios-API

useAxiosGet()

GET request

Arguments

  • url: string: The request URL.
  • axiosInsance: axios: (OPTIONAL) The custom axios instance.
  • options: object: (OPTIONAL) Config option of axios.
  • delay: number: (OPTIONAL) Request delay.
  • successCb: function: (OPTIONAL) Callback triggered when the request was successfully executed.
  • failedCb: function: (OPTIONAL) Callback triggered when the request returned an error.
  • onlyDispathcIf: bool: (OPTIONAL) Only the request is dispatched when this property is true
  • controlledFetch: bool: (OPTIONAL) This property causes the request to run only when the dispatchFetch function is called

Returns

Object containing:

  • status: string: Request status.
  • response: object: Request response.
  • error: object: Request error.
  • dispatchFetch: function: Dispatched request if controlledFetch property is true.

Example

import { useAxiosGet } from "react-hooks-toolbox";

const ListPosts = () => {
  const { status, response } = useAxiosGet({
    ....
  });

  ......
};

useAxiosPost()

POST request

Arguments

  • url: string: The request URL.
  • axiosInsance: axios: (OPTIONAL) The custom axios instance.
  • options: object: (OPTIONAL) Config option of axios.
  • delay: number: (OPTIONAL) Request delay.
  • successCb: function: (OPTIONAL) Callback triggered when the request was successfully executed.
  • failedCb: function: (OPTIONAL) Callback triggered when the request returned an error.
  • onlyDispathcIf: bool: (OPTIONAL) Only the request is dispatched when this property is true
  • controlledFetch: bool: (OPTIONAL) This property causes the request to run only when the dispatchFetch function is called

Returns

Object containing:

  • status: string: Request status.
  • response: object:` Request response.
  • error: object: Request error.
  • dispatchFetch: function: Dispatched request if controlledFetch property is true.

Example

import { useAxiosPost } from "react-hooks-toolbox";

const AddPost = () => {
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");

  const { status, response, dispatchFetch } = useAxiosPost({
    url: "http://localhost:3001/posts",
    controlledFetch: true,
    options: {
      data: {
        title: title,
        author: author
      }
    },
    successCb: response => {
      console.log(response);
    }
  });

  return (
    <div>
      <input value={title} onChange={e => setTitle(e.target.value)} />
      <input value={author} onChange={e => setAuthor(e.target.value)} />
      <button onClick={() => dispatchFetch()}>Add Post</button>
    </div>
  );
};

Google-API

useGoogleApiInit()

This Hook is designed for load https://apis.google.com/js/api.js, initialize Google API and handle sign status.

Arguments

Returns

Object containing:

  • gapiStatus: string: init This status determines when is safe to use windows["gapi"] and gapi is initialized.
  • gapiError: object | string: null The errors thrown.
  • signed: boolean: false Sign status.
  • userProfile: object: null User's basic profile information and token.

DYMO-API

useDymoCheckService()

Return the status of DYMO Label Web Service

Arguments

  • port: number:(OPTIONAL) The port of running DYMO Label Web Service.

Returns

  • status: string: "init": "init" | "loading" | "success" | "error" Status of DYMO Label Web Service.

useDymoFetchPrinters()

Returns the available DYMO Labelwriter Printer

Arguments

  • statusDymoService: string: The status of DYMO Label Web Service.
  • modelPrinter: string: The model of label writer printer.
  • port: number: The port of running DYMO Label Web Service.

Returns

Object containing:

  • statusDymoFetchPrinters: string: "init": "init" | "loading" | "success" | "error" Status of loading printers.
  • printers: array: [] The list of available DYMO Printer.

useDymoOpenLabel()

Render Label

Arguments

  • statusDymoService: string: The status of DYMO Label Web Service.
  • labelXML: xml file: XML file.
  • port: number:(OPTIONAL) The port of running DYMO Label Web Service.

Returns

Object containing:

  • label
  • statusOpenLabel: string: "init": "init" | "loading" | "success" | "error" Status of render label.
  • errorOpenLabel

Example

import { useDymoOpenLabel, useDymoCheckService } from "react-hooks-toolbox";

const DymoLabelPreview = () => {
  const statusDymoService = useDymoCheckService();
  const { label, statusOpenLabel, errorOpenLabel } = useDymoOpenLabel(
    statusDymoService,
    xmlFile
  );

  if (label) {
    return (
      <img src={"data:image/png;base64," + label} alt="dymo label preview" />
    );
  } else {
    return null;
  }
};