🍯 React Honey Hooks

A React Hooks version of the Honey Hooks library

🌴 Support Tree Shaking

Hooks available:

• useQuery
• useCountDownDate
• useOutsideElement

Next Hooks

• 🔥 useTranslate
• 🔥 useMouse

Content Table

• useQuery
• useCountDownDate
• useOutsideElement

🍯 useQuery

- First we navigate to the page
- Example: https://example.com?query=value
- Then we use the hook to get the query value

Javascript

// ES5
var useQuery = require("react-honey-hooks").useQuery;
var query = useQuery();

// https://abc.com?query=value
console.log(query); // {query: "value"}

// or

var honey = require("react-honey-hooks");

var query = honey.useQuery();
// https://abc.com?query=value
console.log(query); // {query: "value"}

// ES6
import { useQuery } from "react-honey-hooks";
function Example() {
  // https://abc.com?query=value
  const query = useQuery();
  console.log(query); // {query: "value"}

  return (
    <>
      <h3> 🍯 useQuery:</h3>
      <p>Query value: {JSON.stringify({ query }, null, 2)}</p>
    </>
  );
}

TypeScript

import { useQuery, ParamsType } from "react-honey-hooks";
function Example() {
  const query = useQuery<ParamsType>(); // {query: "value"}
  return (
    <>
      <h3>useQuery: 🍯</h3>
      <p>Query value: {JSON.stringify(query, null, 2)}</p>
    </>
  );
}

🍯 useCountDownDate

JavaScript

import { useCountdownDate } from "react-honey-hooks";
function Example() {
  const countDown = useCountdownDate(Date.now()); // {days: 0, hours: 0, minutes: 0, seconds: 0}
  return (
    <>
      <h3> 🍯 useCountdownDate:</h3>
      <p>DownCount Date value: {JSON.stringify(countDown, null, 2)}</p>
    </>
  );
}

TypeScript

import { useCountdownDate, DownCountDateType } from "react-honey-hooks";
function Example() {
  const countDown: DownCountDateType = useCountdownDate(Date.now()); // {days: 0, hours: 0, minutes: 0, seconds: 0}

  return (
    <>
      <h3> 🍯 useCountdownDate:</h3>
      <p>DownCount Date value: {JSON.stringify(countDown, null, 2)}</p>
    </>
  );
}

🍯 useOutsideElement

JavaScript

import { useRef } from "react";
import { useCountdownDate } from "react-honey-hooks";

function Example() {
  const refElem = useRef(null);

  useOutsideElement({
    ref: refElem,
    callback: _onClick
  });

  function _onClick() {
    // Do something
    alert("clicked outside paragraph");
  }

  return (
    <>
      <h3> 🍯 useOutsideElement:</h3>
      <p ref={refElem} onClick={_onClick}>
        click outside paragraph
      </p>
    </>
  );
}

TypeScript

import { useRef, RefObject } from "react";
import { useCountdownDate } from "react-honey-hooks";

function Example() {
  const refElem = useRef<RefObject<HTMLElement>>(null);

  useOutsideElement({
    ref: refElem,
    callback: _onClick
  });

  function _onClick() {
    // Do something
    alert("clicked outside paragraph");
  }

  return (
    <>
      <h3> 🍯 useOutsideElement:</h3>
      <p ref={refElem} onClick={_onClick}>
        click outside paragraph
      </p>
    </>
  );
}