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];
};