NPM version npm download

Collection of Hooks.

Note: React 16.8+ is required for Hooks.

npm i react-hooks-toolbox

yarn add react-hooks-toolbox

• 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

• Hooks
  • Axios-API
    • useAxiosGet()
    • useAxiosPost()
  • Google-API
    • useGoogleApiInit()
  • DYMO-API
    • useDymoCheckService()
    • useDymoFetchPrinters()
    • useDymoOpenLabel()

GET request

• 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

Object containing:

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

import { useAxiosGet } from "react-hooks-toolbox";
const ListPosts = () => {
 const { status, response } = useAxiosGet({
 ....
 });
 ......
};

POST request

• 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

Object containing:

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

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

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

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

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.

Return the status of DYMO Label Web Service

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

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

Returns the available DYMO Labelwriter Printer

• 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.

Object containing:

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

Render Label

• 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.

Object containing:

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

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