useRefsList

Category

Component

Export Size

184 B

Last Changed

5 days ago

Shorthand for binding refs to elements rendered inside a list

Demo

Usage

import { useRefsList } from '@reause/core'

function List({ items }: { items: string[] }) {
  const refs = useRefsList<HTMLLIElement>()

  return (
    <ul>
      {items.map(item => (
        <li key={item} ref={el => refs.set(el)}>
          {item}
        </li>
      ))}
    </ul>
  )
}

Type Declarations

export type TemplateRefsList<T> = T[] & {
    set: (el: T | null) => void;
}

export function useRefsList<T = Element>(): TemplateRefsList<T>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

65f65 - fix(core): resolve useRefsList audit findings (#628)

cc7df - refactor(core)!: rename useTemplateRefsList to useRefsList