Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/balazsorban44/prop-comb
Create React components from a given combinations of props.
https://github.com/balazsorban44/prop-comb
Last synced: 14 days ago
JSON representation
Create React components from a given combinations of props.
- Host: GitHub
- URL: https://github.com/balazsorban44/prop-comb
- Owner: balazsorban44
- Created: 2019-09-08T11:19:08.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T13:29:22.000Z (over 2 years ago)
- Last Synced: 2024-10-11T11:58:09.416Z (28 days ago)
- Language: JavaScript
- Homepage: https://npm.im/prop-comb
- Size: 43.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# prop-comb
Create React components from a given combinations of props.
---
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license]
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
---
## Installation
```sh
yarn add prop-comb
# or
npm install prop-comb
```
## Usage example
Let's say you use a Button component from a UI library, with specific props all the time.
To avoid declaring the same props everywhere, you have the following options:
1. Modify the global theme, so the default Button has all the styling you need.
The drawback here is that you can only define one default Button with custom styling.
2. Create a file, that exports different buttons, with hardcoded props on them.
It may be a better approach, but you still have to iterate over the possible combinations you need manually.
Something like this:
```jsx
// Buttons.js
import {Button} from "your-ui-library"
export const ButtonPrimary = props =>
export const ButtonLarge = props =>
export const ButtonPrimaryLarge = props =>
// or the following, whatever you prefer
export const ButtonLargePrimary = props =>
```
This is where `prop-comb` comes into the picture:
```js
// Buttons.js
import {Button} from "your-ui-library"
import propComb from "prop-comb"
export default propComb(Button, {
color: ["primary"],
size: ["large"]
})
```
And the component where you would like to use the `Button`
```jsx
import {Button as UIButton} from "your-ui-library"
import Button from "./Buttons" // with prop-comb
import {ButtonPrimary, ButtonPrimaryLarge} from "./Buttons" // without prop-comb
const Component = () => {
return (
Primary button
Primary large button
Primary button
Primary large button
)
}
```
The difference is not huge, but if you use a big combinations of components all the time, it may result in less writing.
`prop-combs` will create all the combinations for you, automatically.
## Under the hood
> But how can `Button.primary` be both a JSX element, and an object containing other JSX elements at the same time?
The answer is [ES6 Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). **This means, you will only be able to use this module in ES6 environments.**
The `propComb` function works like this:
When you access for example Button.primary, and use it as a JSX Element, it will be called as a function under the hood. This is caught by the `apply()` trap in the Proxy, that will than return a JSX element for you. If you go deeper, and try to get a property by dot notation, the proxy will trap it with `get()`. It does that recursivly, this is how can you go deeper than one "layer".
[version-badge]:
https://img.shields.io/npm/v/prop-comb.svg?style=flat-square
[package]: https://www.npmjs.com/package/prop-comb
[downloads-badge]:
https://img.shields.io/npm/dm/prop-comb.svg?style=flat-square
[npm]: https://www.npmjs.com/
[node]: https://nodejs.org
[npmtrends]: http://www.npmtrends.com/prop-comb
[license-badge]:
https://img.shields.io/npm/l/prop-comb.svg?style=flat-square
[license]:
https://github.com/balazsorban44/prop-comb/blob/master/LICENSE
[prs-badge]:
https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[coc-badge]:
https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]:
https://github.com/balazsorban44/prop-comb/blob/master/CODE_OF_CONDUCT.md
[github-watch-badge]:
https://img.shields.io/github/watchers/balazsorban44/prop-comb.svg?style=social
[github-watch]: https://github.com/balazsorban44/prop-comb/watchers
[github-star-badge]:
https://img.shields.io/github/stars/balazsorban44/prop-comb.svg?style=social
[github-star]: https://github.com/balazsorban44/prop-comb/stargazers