https://github.com/jonlambert/react-propose
⚙️ Collection of simple functions that help reduce JSX boilerplate when extending React components.
https://github.com/jonlambert/react-propose
react typescript
Last synced: 2 months ago
JSON representation
⚙️ Collection of simple functions that help reduce JSX boilerplate when extending React components.
- Host: GitHub
- URL: https://github.com/jonlambert/react-propose
- Owner: jonlambert
- Created: 2022-04-20T13:56:43.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-12T14:08:14.000Z (over 3 years ago)
- Last Synced: 2025-10-11T09:34:04.525Z (9 months ago)
- Topics: react, typescript
- Language: TypeScript
- Homepage:
- Size: 133 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Propose / withDefaultProps
Props, composed.
This package exposes a tiny [(<1kb)](https://bundlephobia.com/package/react-propose), 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.
```tsx
import { withDefaultProps } from 'react-propose';
```
#### Given a base component
```tsx
interface BaseMessageProps {
message: string;
title?: string;
}
const BaseMessage: React.FC = ({ message, title }) => (
{title && {title}
}
{message}
);
```
#### Before
```tsx
interface FooBarMessageProps extends Omit {}
const FooBarMessage: React.FC = ({ message }) => (
);
```
#### With `react-propose`
```tsx
const FooBarMessage = 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:
```ts
import { withDefaultProps } from 'react-propose';
import { Button } from '@chakra-ui/react';
const SimpleButton = withDefaultProps(Button, { p: 4, bg: 'green.400' });
const DestructiveButton = withDefaultProps(SimpleButton, { bg: 'red.400'});
```