# react-scrap

> A utility for quickly creating hassle-free React components with class names managed by the [JedWatson/ClassNames](https://github.com/JedWatson/classnames) module.

Latest version **1.0.2** (published 2016-08-10) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2016-08-10 |
| First published | 2016-08-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | James Meyers |
| Maintainers | simplej |
| Keywords | react, utility |

## Links

- npm: https://www.npmjs.com/package/react-scrap
- Repository: https://github.com/FullR/react-scrap
- Homepage: https://github.com/FullR/react-scrap#readme
- Issues: https://github.com/FullR/react-scrap/issues
- npm.io page: https://npm.io/package/react-scrap

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^15.3.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2016-08-10
- 1.0.1 — 2016-08-10
- 1.0.0 — 2016-08-10

## README

## react-scrap

A utility for quickly creating hassle-free React components with class names managed by the [JedWatson/ClassNames](https://github.com/JedWatson/classnames) module.

## Install

```bash
npm install react-scrap
```

## API

```js
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

```javascript
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:

```html
<div>
  <button class="btn btn-primary btn-disabled" disabled>
    Press Me
  <button>
  <button class="btn btn-danger pirate">
    YARR!
  </button>
</div>

```

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