# react-props-classnames

> Easily transform component's props to classnames

Latest version **0.2.3** (published 2018-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-props-classnames
pnpm add react-props-classnames
yarn add react-props-classnames
bun add react-props-classnames
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2018-06-06 |
| First published | 2018-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Evan Ye |
| Maintainers | jigsawye |

## Links

- npm: https://www.npmjs.com/package/react-props-classnames
- Repository: https://github.com/jigsawye/react-props-classnames
- Issues: https://github.com/jigsawye/react-props-classnames/issues
- npm.io page: https://npm.io/package/react-props-classnames

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.4.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1

## Recent versions

- 0.2.3 (latest) — 2018-06-06
- 0.2.2 — 2018-06-06
- 0.2.1 — 2018-06-05
- 0.2.0 — 2018-06-02
- 0.1.2 — 2018-05-29
- 0.1.1 — 2018-05-29
- 0.1.0 — 2018-05-29

## README

# React Props Classnames

[![Travis](https://img.shields.io/travis/jigsawye/react-props-classnames.svg?style=flat-square)](https://travis-ci.org/jigsawye/react-props-classnames)
[![Codecov](https://img.shields.io/codecov/c/github/jigsawye/react-props-classnames.svg?style=flat-square)](https://codecov.io/gh/jigsawye/react-props-classnames)
[![npm](https://img.shields.io/npm/v/react-props-classnames.svg?style=flat-square)](https://www.npmjs.com/package/react-props-classnames)

**Easily transform component's props to classnames**

- Good usage with `styled-components` when you want to control styles by props.
- Transform your boolean and string props to className.
- Customized classNames prefix.

## Install

```bash
yarn add react-props-classnames
```

## Examples

[![Edit 5zzjpn94zn](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5zzjpn94zn)

## Usage

```js
import styled from 'styled-components';
import createPropsTransform from 'react-props-classnames';

const propsTransform = createPropsTransform({
  prefix: 'my-button',
  props: ['circle', 'size'],
});

const Button = styled.button`
  /* ... */

  &.my-button-circle {
    /* ... */
  }

  &.my-button-size-lg {
    /* ... */
  }
`;

export default propsTransform(Button);
```

```jsx
<Button circle size="lg" type="button" disalbed>Button</Button>

// will trasnform to

<button class="{...styled} my-button-circle my-button-size-lg">Button</button>
```

## API

### `createPropsTransform(options)`

#### `options` _(Object)_

| key    | Type      | Default          | Description                                                                                             |
| :----- | :-------- | :--------------- | :------------------------------------------------------------------------------------------------------ |
| prefix | `String`  | 'default-prefix' | The prefix of every classNames.                                                                         |
| props  | `Array`   | []               | The props which will be transformed. If this option is empty, `propsTransform` will transform any props |
| bool   | `Boolean` | true             | Transform boolean props to classNames or not.                                                           |
| string | `Boolean` | true             | Transform string props to classNames or not.                                                            |

#### Returns

A higher-order component that transform props then pass into your components.

## License

MIT © [jigsawye](https://github.com/jigsawye)

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