https://github.com/afeiship/with-props
Enhance component with preset properties.
https://github.com/afeiship/with-props
default-props presets properties react with-props
Last synced: 3 months ago
JSON representation
Enhance component with preset properties.
- Host: GitHub
- URL: https://github.com/afeiship/with-props
- Owner: afeiship
- License: mit
- Created: 2018-09-06T05:45:06.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2026-03-26T14:49:06.000Z (3 months ago)
- Last Synced: 2026-03-27T05:43:05.692Z (3 months ago)
- Topics: default-props, presets, properties, react, with-props
- Language: TypeScript
- Homepage:
- Size: 25.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# with-props
> Enhance component with preset properties.
[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]
## installation
```shell
npm install @jswork/with-props
```
## usage
```tsx
import withProps from '@jswork/with-props';
import React from 'react';
interface ButtonProps {
text: string;
color?: string;
size?: 'small' | 'medium' | 'large';
}
const Button: React.FC = ({ text, color = 'blue', size = 'medium' }) => {
return (
{text}
);
};
// Create a component with default props
const PrimaryButton = withProps(Button, {
color: 'red',
size: 'large'
});
const App: React.FC = () => {
return (
{/* Uses default props */}
{/* Override default props */}
);
};
```
### Features
- **Type Safe**: Full TypeScript support with proper type inference
- **Props Merging**: Default props are overridden by provided props
- **Simple API**: Just pass component and default props
- **Zero Dependencies**: Lightweight and focused
## license
Code released under [the MIT license](https://github.com/afeiship/with-props/blob/master/LICENSE.txt).
[version-image]: https://img.shields.io/npm/v/@jswork/with-props
[version-url]: https://npmjs.org/package/@jswork/with-props
[license-image]: https://img.shields.io/npm/l/@jswork/with-props
[license-url]: https://github.com/afeiship/with-props/blob/master/LICENSE.txt
[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/with-props
[size-url]: https://github.com/afeiship/with-props/blob/master/dist/index.min.js
[download-image]: https://img.shields.io/npm/dm/@jswork/with-props
[download-url]: https://www.npmjs.com/package/@jswork/with-props