Use prop collections to pass on aria attributes

Package up the props which always need to be passed to a component in a hook.

Ryan Scharfer1 min read
Contents4 sections
  1. Why use them?
  2. Where can I find these in the "real world"?
  3. What do you have to watch for?
  4. What is the difference between a prop collection and prop getters?

Why use them?#

Sometimes a set of properties needs to be passed to a component which you do not necessarily need to customize all of the time, such as aria props. One way to make this easy on yourself is to write a hook that always provides the "fixed" properties - i.e. a prop collection - and you spread the return value from that hook into your component.

javascript
function useToggle() {	const [on, setOn] = useState(false)	const toggle = () => setOn(!on) 	return {		on,		toggle,		togglerProps: {			'aria-checked': on,			onClick: toggle,		},	}} function App() {	const { on, togglerProps } = useToggle()	return (        <button aria-label="custom-button" {...togglerProps}>            {on ? 'on' : 'off'}        </button> 	)}

Where can I find these in the "real world"?#

The hooks built by React Table provide the user with prop getters you can call to get the attributes you will need to add to your table, thead, and tbody elements. The prop getters will add things such as the role attribute to each element. You can pass in an object to the prop getter to override the values that are returned.

What do you have to watch for?#

You need to make sure the user knows where to apply the prop collections they are getting back.

What is the difference between a prop collection and prop getters?#

With prop getters, you allow the user to override the props they would typically get back with a prop collection. A lot of times this involves composing functions together.