A set of useful hooks for prototyping and development collected from all over the Internet.
npm install react-hooks-framerA set of useful hooks for prototyping and development collected from all over the Internet.
Install the package: npm i react-hooks-framer. These hooks are ready to use in Framer / Instant NPM.
``js
// 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
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.
`js
import { useAsync } from "react-hooks-framer"
export default function Component() {
const { execute, status, value, error } = useAsync(myFunction, false)
return (
// 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)
})
}
`
This hook helps to limit re-rendering of a component too many times. It uses two parameters: value and debounce time (ms).
`js
import { useDebounce } from "react-hooks-framer"
export default function Component() {
const [value, setValue] = useState(0)
const debouncedValue = useDebounce(value, 1000)
return (
)
}
`
This hook helps to detect a platform, system and rendering type.
`js
import { useDeviceDetect } from "react-hooks-framer"
export default function Component() {
const detectMobile = useDeviceDetect()
return (
: ${detectMobile.isAndroid}}: ${detectMobile.isIos}}: ${detectMobile.isMobile}}: ${detectMobile.isDesktop}}: ${detectMobile.isSSR}}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.
js
import { useElementSize } from "react-hooks-framer"export default function Component() {
const [elementRef, { width, height }] = useElementSize()
return (
{The element width is ${width}px and height ${height}px}
)
}
`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.
js
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 (
)
}
`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.
js
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
There is an error.
if (!data) return Loading...
return
{data[0].title}
return (
(error && "There is an error")
(!data && "Loading...")
(data && "Data is here!")
)
}
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.
js
import { useFirstMount } from "react-hooks-framer"export default function Component() {
const { isFirstMount } = useFirstMount()
return (
{isFirstMount && ("First mount!")}
{!isFirstMount && ("The component has been mounted again!")}
)
}
`useGeolocation
This hook makes it easy to detect the user's location. It takes two parameters: options and watch (infinite position tracking).
js
import { useGeolocation } from "react-hooks-framer"export default function Component() {
const happyPress = useGeolocation({ enableHightAccuracy: true }, false)
return (
{error && ("Something went wrong")}
{loading && ("Loading...")}
{position && Your location: ${position.coords.latitude} lat, ${position.coords.longitude} lng}
)
}
`useInterval
This hook helps to use
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.`js
import { useInterval } from "react-hooks-framer"export default function Component() {
const [count, setCount] = useState(0)
useInterval(() => {
setCount(count + 1)
}, 1000)
return (
return
{It counts every 1s: ${count}}
)
}
`useKeyPress
This hook makes it easy to detect when a user is pressing a specific key on their keyboard.
js
import { useKeyPress } from "react-hooks-framer"export default function Component() {
const happyPress = useKeyPress("h")
return (
{happyPress && "😊"}
)
}
`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,
will return the default value.`js
import { useLocalStorage } from "react-hooks-framer"export default function Component() {
const [someProperty, setSomeProperty] = useLocalStorage('someProperty', true)
const toggleProperty = () => {
setSomeProperty(prevValue => !prevValue)
}
return (
The current property value is ${someProperty ? true : false}}
)
}
`useOnClickOutside
This hook helps to listen any clicks outside of a specified element.
js
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 (
)
}
`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.
js
import { useOnScreen } from "react-hooks-framer"export default function Component() {
const ref = useRef()
const onScreen = useOnScreen(ref, "-300px", 0);
return (
Scroll down to next section 👇
style={{
height: "100vh",
backgroundColor: onScreen ? "#23cebd" : "#efefef"
}}
>
{onScreen ? (Hey I am on the screen
) : Scroll down 👇
}
usePrevious
This hook helps storing the previous value.
js
import { usePrevious } from "react-hooks-framer"export default function Component() {
const [count, setCount] = useState(0)
const prevCount = usePrevious(count)
return (
Now: {count}, before: {prevCount}
)
}
`useReadLocalStorage
This hook allows you to read a value from
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.`js
import { useReadLocalStorage } from "react-hooks-framer"export default function Component() {
const someProperty = useReadLocalStorage('someProperty')
return (
{The current property value is ${someProperty ? true : false}}
)
}
`useScreen
This hook helps to retrieve the
object. Also, it works when onRezise is triggered.`js
import { useScreen } from "react-hooks-framer"export default function Component() {
const screen = useScreen()
return (
The current window dimensions are:
{JSON.stringify({ width: screen.width, height: screen.height })}
)
}
`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 (
, loading, ready, error). Updated when the link changes.`js
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 (
)
}
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 (
, loading, ready, error). It will be updated when inline styles changes.`js
import { useScript } from "react-hooks-framer"export default function Component() {
const customStylesState = useStyles(
"yourStylesID",
)
return (
Hello world!
)
}
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.
js
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 (
onClick={() => setTheme("theme_light" ? "theme_dark" : "theme_light")}
>
Button
)
}
`useToggle
This hooks helps to toggle a boolean value.
js
import { useToggle } from "react-hooks-framer"export default function Component() {
const [toggle, setToggle] = useToggle()
return (
)
}
`useWhyDidYouUpdate
This hook makes it easy to see which prop changes are causing a component to re-render.
js
import { useWhyDidYouUpdate } from "react-hooks-framer"export default function Component() {
useWhyDidYouUpdate("Component", props)
return
{props.count}
}
`useWindowSize
This hook returns a window's size. Also, it works when
is triggered.`js
import { useScreen } from "react-hooks-framer"export default function Component() {
const { width, height } = useWindowSize()
return (
The current window dimensions are: {JSON.stringify({ width, height })}
)
}
``