@clds/compound-components

@clds/compound-components

---

@cld/compound-components

Documentation of the Cloudinary Compound components architecture implementation details.

Lists

Low coupling architecture

Here you can learn about architecture for compound components which is used primarily by list-based components.

Compound components

Compound components is a pattern when one parent component composes other components in a subtree and establishes communication between them.

Many existing solutions require passing exact array of children as parent children prop so list has access to children props and doesn't need to communicate with components after they are mounted. This kind of composition highly couples children to theirs parent. It is very limited as finally rendered items should have the same structure as defined in children prop. You can't wrap fragment of list items inside reusable component or you cant wrap items by other dom elements such as div. Also you can't use routing mechanism as it changes the rendered structure which becomes different than specified in parent.children prop.

Low coupling

Low coupling means here that children components can be structured in any way that React allows: list items can be wrapped inside other reusable components, routes and they should communicate well regardless how they are nested inside parent component.

Low coupling also means that when implementing particular UI component such as list, dropdown menu, select field, inline menu etc, you can freely reuse various small specialized modules (components, hooks) without a need of refactoring any of them because they have pretty defined small responsibility and they are designed to work together following react unidirectional data flow pattern. This means that you can use hooks for parent component and for children component that you actually need. They only things they communicate is React context.

Primary goal

Primary goal of this architecture is to provide high reuse and extendability of simple components and hooks without a need to limit power of component architecture. We can say this approach promotes Composition over configuration.

Versioning

This library follows Semantic Versioning.

License

See LICENSE