Copy & paste ready, highly customizable hooks I frequently use in React projects
- Framer Motion Hooks (matthiaaas/framer-motion-hooks)
- Electron Context Menu (transflow/use-electron-context-menu)
React DOM Portal on the client side (especially useful for Next.js)
export const Modal = () => {
const { Portal } = useClientPortal({
selector: "#el" // optional
})
return (
<Portal>
<Wrapper>...</Wrapper>
</Portal>
)
}
Focus & modal management functions
export const Modal = () => {
const stack = useStack()
if (!stack.hasFocus("myModal")) return null
return (
<Wrapper>
<h2>Modal</h2>
</Wrapper>
)
}
const stack = useStack()
stack.addFocus(key)
stack.hasFocus(key)
stack.hasSubFocus(key)
stack.removeFocus(key)
Hook that responds to ipcMain events (way of communicating between Electron's main process and the renderer)
electronjs.org/docs/api/ipc-renderer
export const Component = () => {
useIpcRenderer(
"user:create",
() => console.log("create user..."),
[user] // optional React state deps
)
}
React state that automatically syncs with localStorage
const defaultSettings = {
toggle: false
}
export const Settings = () => {
const [settings, setSettings] = useLocalStorage(
"settings",
defaultSettings,
true
)
const handleToggle = () => {
setSettings(settings => ({
...settings,
toggle: !settings.toggle
}))
}
return <button onClick={handleToggle}>Toggle</button>
}
const [state, setState] = useLocalStorage(key, defaultState, sync)
Check if user is on mobile device
export const Page = () => {
const isMobile = useMobile()
return <div>{isMobile && <span>Mobile Device</span>}</div>
}
const isMobile = useMobile({
breakpoint: 580, // only match screen width
userAgent: true // only match user agent
})
Range picker utilities
export const Calendar = () => {
const rangePicker = useRangePicker({
onChange: (start, end) => console.log(start, end)
})
return (
<Wrapper>
<Months>
{rangePicker.months.map((month, i) => (
<Month key={i}>{month.format("MMMM")}</Month>
))}
</Months>
<DaysMonths>
{rangePicker.days.map((days, i) => (
<Days key={i}>
{days.map(day =>
day ? (
<Day
selected={rangePicker.is(day, "selected")}
between={rangePicker.is(day, "between")}
onClick={() => rangePicker.select(day)}
onMouseEnter={() => rangePicker.preview(day)}
>
{day.format("D")}
</Day>
) : (
<div />
)
)}
</Days>
))}
</DaysMonths>
</Wrapper>
)
}
const rangePicker = useRangePicker({
start: moment(),
onChange: (start, end) => {}
})
rangePicker.select(day)
rangePicker.preview(day)
rangePicker.is(day, "selected")
rangePicker.clear()
rangePicker.months // array of moment months
rangePicker.days // array[] of moment days