react-scrap
v1.0.2
Published
A utility for quickly creating hassle-free React components with class names managed by the [JedWatson/ClassNames](https://github.com/JedWatson/classnames) module.
Downloads
12
Readme
react-scrap
A utility for quickly creating hassle-free React components with class names managed by the JedWatson/ClassNames module.
Install
npm install react-scrap
API
scrap(BaseComponent="div" [, ...staticNames, dynamicNamesFn])
Takes a base component, any number of static class names as strings or objects, and an optional dynamic class name render function that receives props and returns any number of dynamic class names.
Example
import React from "react";
import ReactDOM from "react-dom";
import scrap from "react-scrap";
const Button = scrap("button", "btn", ({type="default", disabled}) => [
`btn-${props.type}`,
{"btn-disabled": disabled}
]);
const PirateButton = scrap(Button, "pirate");
function App() {
return (
<div>
<Button type="primary" disabled>
Press Me
<Button>
<PirateButton type="danger">
YARR!
</PirateButton>
</div>
);
}
ReactDOM.render(<App/>, document.querySelector("#app-container"));
renders into:
<div>
<button class="btn btn-primary btn-disabled" disabled>
Press Me
<button>
<button class="btn btn-danger pirate">
YARR!
</button>
</div>