# react-propose

> Props, composed.

Latest version **1.5.0** (published 2023-03-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-propose
pnpm add react-propose
yarn add react-propose
bun add react-propose
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2023-03-12 |
| First published | 2022-04-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jon Lambert |
| Maintainers | jonlambert |

## Links

- npm: https://www.npmjs.com/package/react-propose
- npm.io page: https://npm.io/package/react-propose

## Recent versions

- 1.5.0 (latest) — 2023-03-12
- 1.4.0 — 2022-07-08
- 1.1.0 — 2022-04-27
- 0.0.9 — 2022-04-26
- 0.0.8 — 2022-04-25
- 0.0.7 — 2022-04-25
- 0.0.6 — 2022-04-21
- 0.0.5 — 2022-04-21
- 0.0.4 — 2022-04-21
- 0.0.3 — 2022-04-21
- 0.0.2 — 2022-04-20

## 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<BaseMessageProps> = ({ message, title }) => (
  <div>
    {title && <h1>{title}</h1>}
    <p>{message}</p>
  </div>
);
```

#### Before

```tsx
interface FooBarMessageProps extends Omit<BaseMessageProps, 'title'> {}
const FooBarMessage: React.FC<FooBarMessageProps> = ({ message }) => (
  <BaseMessage title="Foo" message={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'});
```

---
_Source: https://npm.io/package/react-propose · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._