React Propose / withDefaultProps

Props, composed.

This package exposes a tiny (<1kb), zero dependency helper function allowing you to compose props from a parent component. Promoting ease of composition - drill down layer by layer by refining each prop, with full TypeScript support.

import{withDefaultProps}from'react-propose';

Given a base component

interfaceBaseMessageProps{message: string;title?: string;}constBaseMessage: React.FC<BaseMessageProps>=({ message, title })=>(<div>{title&&<h1>{title}</h1>}<p>{message}</p></div>);

Before

interfaceFooBarMessagePropsextendsOmit<BaseMessageProps,'title'>{}constFooBarMessage: React.FC<FooBarMessageProps>=({ message })=>(<BaseMessagetitle="Foo"message={message}/>);

With react-propose

constFooBarMessage=withDefaultProps(BaseMessage,{title: 'Foo'});

With Chakra UI

styled-components introduced a simple API to apply styles to a component. Use withDefaultProps() to achieve a similar DX, with full autocompletion and type safety:

import{withDefaultProps}from'react-propose';import{Button}from'@chakra-ui/react';constSimpleButton=withDefaultProps(Button,{p: 4,bg: 'green.400'});constDestructiveButton=withDefaultProps(SimpleButton,{bg: 'red.400'});