Create React components from a given combinations of props.
Create React components from a given combinations of props.
yarn add prop-comb
# or
npm install prop-comb
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:
Something like this:
// Buttons.js
import {Button} from "your-ui-library"
export const ButtonPrimary = props => <Button color="primary" {...props}/>
export const ButtonLarge = props => <Button size="large" {...props}/>
export const ButtonPrimaryLarge = props => <Button color="primary" size="large" {...props}/>
// or the following, whatever you prefer
export const ButtonLargePrimary = props => <Button size="large" color="primary" {...props}/>
This is where prop-comb
comes into the picture:
// 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
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 (
<div>
<Button.primary>Primary button</Button.primary>
<Button.primary.large>Primary large button</Button.primary.large>
<ButtonPrimary>Primary button</ButtonPrimary>
<ButtonPrimaryLarge >Primary large button</ButtonPrimaryLarge>
</div>
)
}
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.
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. 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".