react-conditional-rendering-extensions.js

import React from "react";

const renderDefinition = definition => props =>
    definition && definition.Component ? (
        <definition.Component {...props} />
    ) : null;

const renderFirst = definitions => props => {
    const definition = definitions.find(definition =>
        definition.condition(props)
    );
    return renderDefinition(definition)(props);
};

const newBuilder = () => {
    const definitions = [];

    return {
        with: function addConditionalComponent(condition, Component) {
            definitions.push({ condition, Component });

            return this;
        },
        build: renderFirst(definitions),
        buildFirst: renderFirst(definitions),
        buildAll: props => {
            return definitions
                .filter(definition => definition.condition(props))
                .map(definition => renderDefinition(definition)(props));
        }
    };
};

const conditionalBuilder = () => {
    const ifBuilder = newBuilder();

    function elseBranch(Component) {
        return {
            build: props => {
                const result = ifBuilder.buildFirst(props);
                return result || renderDefinition({ Component })(props);
            }
        };
    }

    return {
        if: function ifBranch(condition) {
            return {
                then: Component => {
                    ifBuilder.with(condition, Component);

                    return { else: elseBranch };
                }
            };
        }
    };
};

export { newBuilder, conditionalBuilder };