The State Reducer Pattern
Summary: Create a
useAccordionhook that people can easily add their own functionality using the state reducer pattern. Examples of functionality they might want to add is enforcing not having more than one panel at a time or making sure that at least one panel is open at a time or both.
The key here is that hooks can accept a custom
reducer function, and users can combine several reducers using a
combineReducer function like below
Your module could expose the following to the users:
- The default reducer
- The function to create a function that chains the reducers together
- The action types the
reducercan process like
- Other reducers to override the defaullts like
FIXME: This accordion implementation does not follow all best accessibility practices. It should be motified according to the specifications, read more at w3.org
useAccordion hook is just four lines!
You can include more action types, such as a
actionType if you'd want to.
Here's the default accordion reducer which is just eight lines of code
Here's the reducer that makes sure that atleast one panel is open
Here's the reducer that makes sure that only one panel is open at a time
Here's an example how you can use the hook
And the top level component