hooks

Copy & paste ready, highly customizable hooks I frequently use in React projects

Released Packages

All Hooks

`useClientPortal`

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

`useStack`

Focus & modal management functions

export const Modal = () => {
  const stack = useStack()

  if (!stack.hasFocus("myModal")) return null

  return (
    <Wrapper>
      <h2>Modal</h2>
    </Wrapper>
  )
}

API

const stack = useStack()

stack.addFocus(key)
stack.hasFocus(key)
stack.hasSubFocus(key)
stack.removeFocus(key)

`useIpcRenderer`

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

`useLocalStorage`

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

API

const [state, setState] = useLocalStorage(key, defaultState, sync)

`useMobile`

Check if user is on mobile device

export const Page = () => {
  const isMobile = useMobile()

  return <div>{isMobile && <span>Mobile Device</span>}</div>
}

API

const isMobile = useMobile({
  breakpoint: 580, // only match screen width
  userAgent: true // only match user agent
})

`useRangePicker`

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

API

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

matthiaaas / hooks