react-overrides.js

import React from "react";
import styled from "styled-components";

export default class Ov extends React.Component {
	render() {
		return (
			<Autocomplete
				overrides={{
					Hello: {
						props: { coucou: "coucou" }
					},
					Bye: {
						component: () => "Goooodbye"
					}
				}}
			/>
		);
	}
}

const Red = styled.div`
	color: red;
`;

const Blue = styled.div`
	color: blue;
`;

const defaultComponents = {
	Hello: props => <Red>Hello {props.coucou}</Red>,
	Bye: props => <Blue>Bye</Blue>
};

class Autocomplete extends React.PureComponent {
	state = {};

	render() {		
		const {
			Hello: { component: Hello, props: helloProps },
			Bye: { component: Bye, props: byeProps }
		} = getComponents(defaultComponents, overrides);

		return (
			<React.Fragment>
				<Hello coucou="default_coucou" {...helloProps} />
				<Bye {...byeProps} />
			</React.Fragment>
		);
	}
}

function getComponents(defaultComponents, overrides) {
	return Object.keys(defaultComponents).reduce((acc, name) => {
		const override = overrides[name] || {};
		acc[name] = {
			component: override.component || defaultComponents[name],
			props: { $style: override.style, ...override.props }
		};
		return acc;
	}, {});
}