https://alchemy-react-color-picker.netlify.app/

Use this template to get started.

• Use custom hooks to bundle together multiple useState & useEffect calls

Our app is a simple one: a colorful message generator. It has a form where you select a foreground color, a background color, and write some text. It will take what you chose and display it in a lovely little box below the form. Cool! 😎

Because we want to delight our end users and send out good vibes, it also displays an affirmation message at the top of the form whenever a new foreground or background color is picked. When text is written, it resets the affirmation message back to the normal form instructions.

In our ColorPicker view, we have quite a few useState calls and a useEffect that we want to refactor out into custom hooks: useColorPicker and useAffirmation. Your job is to create these custom hooks by extracting the relevant useState and useEffect calls into their corresponding custom hooks.

Anything related to the form values or handling form changes for the color picker should go in the useColorPicker hook.

Anything related to setting or changing affirmations should go into the useAffirmation hook.

• useColorPicker hook implemented
• useAffirmation hook implemented
• Existing tests pass
• STRETCH: Combine the multiple useState calls for the color picker form into one
• STRETCH: Write tests for your custom hooks (see this post for an example)