react-hooks-toolbox

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()
    • useAxiosPost()
  • Google-API
    • useGoogleApiInit()
  • DYMO-API
    • useDymoCheckService()
    • useDymoFetchPrinters()
    • useDymoOpenLabel()

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

• initConf: object: object for Initialize the gapi.client.init(args).

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;
  }
};