Spend less time crafting your Compound Components structure

Description

This library aims to make it easier to develop and maintain Compound Components by encapsulating context creation and compound composition logic under two core helpers.

Check those amazing posts to learn more about Compound Components:

- https://www.smashingmagazine.com/2021/08/compound-components-react/
- https://betterprogramming.pub/compound-component-design-pattern-in-react-34b50e32dea0
- https://blog.logrocket.com/understanding-react-compound-components/

Examples/Demo

- Stackblitz Collection

1. Simple Counter Example: An almost in-line example of a Counter with its own state. Here just for a very quick proof-of-concept.
2. A Better Structured Example: An example of an Accordion compound
3. Nested Compounds Example: An example of nested compound
4. Flattened Root Example: An example of how you can flatten Root components

How to Use?

1. Create your Context

Start off by creating your context. This context will be available via a hook on all the sub-components. A good way to keep a dispatch-editable state across the components.

``tsx
import { contextBuilder } from "react-compound-composer";

const {
Consumer: CounterConsumer, // Consumer is also returned, just for convenience
Provider: CounterProvider,
useContext: useCounterContext,
} = contextBuilder(() => {
const [count, setCount] = useState(0);

return {
count,
increase: (count: number) => setCount((c) => c + count),
decrease: (count: number) => setCount((c) => c - count),
};
});
`

2. Create your Root & Sub Components

Create a few components to be composed under the compound.

`tsx
import React from "react";

const CounterRoot = (props: React.PropsWithChildren) => {
return (
style={{
display: "flex",
flexDirection: "column",
gap: 10,
alignItems: "center",
}}
>
{props.children}