diff --git a/src/overridable.js b/src/overridable.js index 24be219..1240ad1 100644 --- a/src/overridable.js +++ b/src/overridable.js @@ -43,9 +43,20 @@ function Overridable({id, children, ...restProps}) { if (id in overriddenComponents) { // If there's an override, we replace the component's content with the override + props - const Overridden = overriddenComponents[id]; - const element = React.createElement(Overridden, {...childProps, ...restProps}); - return {element}; + + if (Array.isArray(overriddenComponents[id])) { + // if the override is an array we display all of them instead of the possible default children + const overrides = overriddenComponents[id]; + const elements = overrides.map((overridden, i) => + React.createElement(overridden, {...childProps, ...restProps, key: `${id}-${i}`}) + ); + return {elements}; + } else { + // if it is not an array if will be used to replace it the possible default child + const Overridden = overriddenComponents[id]; + const element = React.createElement(Overridden, {...childProps, ...restProps}); + return {element}; + } } else if (child) { // No override? Clone the Overridable component's original children const element = React.cloneElement(child, childProps); diff --git a/src/store.js b/src/store.js index 8c8444e..9b13d2f 100644 --- a/src/store.js +++ b/src/store.js @@ -11,6 +11,13 @@ export class OverriddenComponentRepository { this.components[id] = Component; }; + append = (id, Component) => { + if (!Array.isArray(this.components[id])) { + this.components[id] = []; + } + this.components[id].push(Component); + }; + get = id => { return this.components[id]; };