react-hooks-framer

A set of useful hooks for prototyping and development collected from all over the Internet.

Getting started in your react project

Install the package: npm i react-hooks-framer. These hooks are ready to use in Framer / Instant NPM.

// Getting started in your react project

import {
    useElementSize,
    useEventListener,
    useScript,
    useStyles
} from "react-hooks-framer"

---

• useAsync
• useDebounce
• useDeviceDetect
• useElementSize
• useEventListener
• useFetch
• useFirstMount
• useGeolocation
• useInterval
• useKeyPress
• useLocalStorage
• useOnClickOutside
• useOnScreen
• usePrevious
• useReadLocalStorage
• useScreen
• useScript
• useStyles
• useTheme
• useToggle
• useWhyDidYouUpdate
• useWindowSize

useAsync

This hook helps to indicate the status of any async request. The hooks takes an async function as the first parameter and boolean as the second one to determine runtime immediately after rendering a component. The hook returns the value, error, and status value. Possible values for status property are: idle, pending, success, error.

import { useAsync } from "react-hooks-framer"

export default function Component() {
    const { execute, status, value, error } = useAsync(myFunction, false)

    return (
        <div>
            {status === "idle" && <div>Start your journey by clicking a button</div>}
            {status === "success" && <div>{value}</div>}
            {status === "error" && <div>{error}</div>}
            <button onClick={execute} disabled={status === "pending"}>
                {status !== "pending" ? "Click me" : "Loading..."}
            </button>
        </div>
    )
}

// An async function for testing our hook.
// Will be successful 50% of the time.
const myFunction = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const rnd = Math.random() * 10
            rnd <= 5
            ? resolve("Submitted successfully 🙌")
            : reject("Oh no there was an error 😞")
        }, 2000)
    })
}

useDebounce

This hook helps to limit re-rendering of a component too many times. It uses two parameters: value and debounce time (ms).

import { useDebounce } from "react-hooks-framer"

export default function Component() {
    const [value, setValue] = useState(0)
    const debouncedValue = useDebounce(value, 1000)

    return (
        <button onClick={() => { setValue(value + 1) }}>
            {`Value is ${value}. Debounced value is ${debouncedValue}.`}
        </button>
    )
}

useDeviceDetect

This hook helps to detect a platform, system and rendering type.

import { useDeviceDetect } from "react-hooks-framer"

export default function Component() {

    const detectMobile = useDeviceDetect()

    return (
        <div>
            <div>{`isAndroid`: ${detectMobile.isAndroid}}</div>
            <div>{`isIos`: ${detectMobile.isIos}}</div>
            <div>{`isMobile`: ${detectMobile.isMobile}}</div>
            <div>{`isDesktop`: ${detectMobile.isDesktop}}</div>
            <div>{`isSSR`: ${detectMobile.isSSR}}</div>
        </div>
    )
}

useElementSize

This hook helps you to dynamically get the width and the height of an HTML element. Dimensions are updated on load, on mount/un-mount, when resizing the window and when the ref changes.

import { useElementSize } from "react-hooks-framer"

export default function Component() {
    const [elementRef, { width, height }] = useElementSize()

    return (
        <div ref={elementRef}>
            {`The element width is ${width}px and height ${height}px`}
        </div>
    )
}

useEventListener

This hook helps to add any event listeners to your components. This hook does all the associated actions: checking if addEventListener is supported, adding the event listener, and removal it on cleanup. It takes as parameters a eventName, a call-back functions (handler) and optionally a reference element.

import { useEventListener } from "react-hooks-framer"

export default function Component() {
    const elementRef = useRef(null)

    const onScroll = (event) => {
      console.log('Window scrolled!', event)
    }

    const onClick = (event) => {
      console.log('Vutton clicked!', event)
    }

    // Example with window based event
    useEventListener('scroll', onScroll)

    // Example with element based event
    useEventListener('click', onClick, elementRef)

    return (
        <button ref={elementRef}>Click me</button>
    )
}

useFetch

The hook aims to retrieve data on an API using the native Fetch API. It takes an url as first parameter and an options object as second one.

import { useFetch } from "react-hooks-framer"

export default function Component() {

    const url = `https://reqbin.com/echo/post/json`
    const options = {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            Id: 78912,
            Customer: "Jason Sweet",
            Quantity: 1,
            Price: 18.0,
        })
    }
    const { data, error } = useFetch(url, options)

    if (error) return <p>There is an error.</p>
    if (!data) return <p>Loading...</p>

    return <p>{data[0].title}</p>

    return (
        <div>
            (error && "There is an error")
            (!data && "Loading...")
            (data && "Data is here!")
        </div>
    )
}

useFirstMount

This hook allows you to determine if the render of the component in which it is called is the first one, or new renders have already occurred. Basically, it can be useful for executing code once in a component, regardless of its further renders.

import { useFirstMount } from "react-hooks-framer"

export default function Component() {
    const { isFirstMount } = useFirstMount()

    return (
        <div>
            {isFirstMount && ("First mount!")}
            {!isFirstMount && ("The component has been mounted again!")}
        </div>
    )
}

useGeolocation

This hook makes it easy to detect the user's location. It takes two parameters: options and watch (infinite position tracking).

import { useGeolocation } from "react-hooks-framer"

export default function Component() {
    const happyPress = useGeolocation({ enableHightAccuracy: true }, false)

    return (
        <div>
            {error && ("Something went wrong")}
            {loading && ("Loading...")}
            {position && `Your location: ${position.coords.latitude} lat, ${position.coords.longitude} lng`}
        </div>
    )
}

useInterval

This hook helps to use setInterval in functional React component with the same API. Set your callback function as a first parameter and a delay (in milliseconds) for the second argument. You can also stop the timer passing null instead the delay.

import { useInterval } from "react-hooks-framer"

export default function Component() {
    const [count, setCount] = useState(0)

    useInterval(() => {
        setCount(count + 1)
    }, 1000)

    return (
        return <div>{`It counts every 1s: ${count}`}</div>
    )
}

useKeyPress

This hook makes it easy to detect when a user is pressing a specific key on their keyboard.

import { useKeyPress } from "react-hooks-framer"

export default function Component() {
    const happyPress = useKeyPress("h")

    return (
        <div>
            {happyPress && "😊"}
        </div>
    )
}

useLocalStorage

This hooks helps to persist a state with the local storage so that it remains after a page refresh. This hook is used in the same way as useState except that you must pass the storage key in the 1st parameter. If the window object is not present, useLocalStorage() will return the default value.

import { useLocalStorage } from "react-hooks-framer"

export default function Component() {
    const [someProperty, setSomeProperty] = useLocalStorage('someProperty', true)

    const toggleProperty = () => {
        setSomeProperty(prevValue => !prevValue)
    }

    return (
      <button onClick={setSomeProperty}>
        {`The current property value is ${someProperty ? `true` : `false`}`}
      </button>
    )
}

useOnClickOutside

This hook helps to listen any clicks outside of a specified element.

import { useOnClickOutside } from "react-hooks-framer"

export default function Component() {
    const elementRef = useRef(null)

    const handleClickOutside = () => {
        // Your custom logic here
        console.log('Clicked outside')
    }

    const handleClickInside = () => {
        // Your custom logic here
        console.log('Clicked inside')
    }

    useOnClickOutside(elementRef, handleClickOutside)

    return (
        <button ref={elementRef} onClick={handleClickInside}>Click on me!</button>
    )
}

useOnScreen

This hook allows you to easily detect when an element is visible on the screen as well as specify how much of the element should be visible before being considered on screen. It takes a reference, an offset value, and a threshold value as parameters.

import { useOnScreen } from "react-hooks-framer"

export default function Component() {
    const ref = useRef()
    const onScreen = useOnScreen(ref, "-300px", 0);

    return (
        <div>
            <div style={{ height: "100vh" }}>
                <h1>Scroll down to next section 👇</h1>
            </div>
            <div
                ref={ref}
                style={{
                    height: "100vh",
                    backgroundColor: onScreen ? "#23cebd" : "#efefef"
                }}
            >
                {onScreen ? (<h1>Hey I am on the screen</h1>) : <h1>Scroll down 👇</h1>}
            </div>
        </div>
    )
}

usePrevious

This hook helps storing the previous value.

import { usePrevious } from "react-hooks-framer"

export default function Component() {
    const [count, setCount] = useState(0)
    const prevCount = usePrevious(count)

    return (
        <div>
            <h1>
                Now: {count}, before: {prevCount}
            </h1>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    )
}

useReadLocalStorage

This hook allows you to read a value from localStorage by its key. It can be useful if you just want to read without passing a default value. If the window object is not present, or if the value doesn't exist, useLocalStorage() will return null.

import { useReadLocalStorage } from "react-hooks-framer"

export default function Component() {
    const someProperty = useReadLocalStorage('someProperty')

    return (
      <div>
        {`The current property value is ${someProperty ? `true` : `false`}`}
      </div>
    )
}

useScreen

This hook helps to retrieve the window.screen object. Also, it works when onRezise is triggered.

import { useScreen } from "react-hooks-framer"

export default function Component() {

    const screen = useScreen()

    return (
        <div>
            The current window dimensions are:
            {JSON.stringify({ width: screen.width, height: screen.height })}
        </div>
    )
}

useScript

The hook helps to add an external script to the page. It takes a script's link as a parameter and returns the status of the script (idle, loading, ready, error). Updated when the link changes.

import { useScript } from "react-hooks-framer"

let token = "XXX"

export default function Component() {

    const googleMapsState = useScript(
        `https://maps.googleapis.com/maps/api/js?key=${token}&libraries=geometry`
    )

    useEffect(() => {
        if (googleMapsState === "ready") {
            map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: -34.397, lng: 150.644 },
                zoom: 8,
            })
        }
    }, [googleMapsState])

    return (
        <div id="map"/>
    )
}

useStyles

The hook helps to add styles to the page. It takes two parameters an id and inline css code. It returns the status of the script (idle, loading, ready, error). It will be updated when inline styles changes.

import { useScript } from "react-hooks-framer"

export default function Component() {

    const customStylesState = useStyles(
        "yourStylesID",
        `
            .element {
                background-color: red;
            }
        `
    )
    return (
        <div className="element">Hello world!</div>
    )
}

useTheme

This hook makes it easy to dynamically change the appearance of your app using CSS variables. It gets and object of css variables as a parameter.

import { useTheme } from "react-hooks-framer"

const theme_light = {
  "button-background": "#6772e5",
}

const theme_dark = {
  "button-background": "#d1d4f1",
}

export default function Component() {

    const [theme, setTheme] = useState("theme_light")

    useTheme(theme)

    return (
        <div>
            <button
                className="button"
                onClick={() => setTheme("theme_light" ? "theme_dark" : "theme_light")}
            >
                Button
            </button>
        </div>
   )
}

useToggle

This hooks helps to toggle a boolean value.

import { useToggle } from "react-hooks-framer"

export default function Component() {
    const [toggle, setToggle] = useToggle()

    return (
        <button onClick={setToggle}>
            {toggle ? 'True' : 'False'}
        </button>
   )
}

useWhyDidYouUpdate

This hook makes it easy to see which prop changes are causing a component to re-render.

import { useWhyDidYouUpdate } from "react-hooks-framer"

export default function Component() {
    useWhyDidYouUpdate("Component", props)

    return <div style={props.style}>{props.count}</div>
}

useWindowSize

This hook returns a window's size. Also, it works when onRezise is triggered.

import { useScreen } from "react-hooks-framer"

export default function Component() {
    const { width, height } = useWindowSize()

    return (
        <div>
            The current window dimensions are: {JSON.stringify({ width, height })}
        </div>
    )
}