# react-prefix-loader

> Webpack loader that prefixes classes in React components

Latest version **1.0.2** (published 2019-01-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-prefix-loader
pnpm add react-prefix-loader
yarn add react-prefix-loader
bun add react-prefix-loader
```

## 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 | 2019-01-30 |
| First published | 2015-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Vladimir Makhaev |
| Maintainers | cray0000, vmakhaev |
| Keywords | react, webpack |

## Links

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

## 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) — 2019-01-30
- 1.0.1 — 2017-03-17
- 1.0.0 — 2017-03-16
- 0.3.0 — 2017-02-08
- 0.2.0 — 2016-02-18
- 0.1.0 — 2015-11-22

## README

# react-prefix-loader

A Webpack loader that prefixes classes in React components  
The idea is to isolate styles in framework components

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

### Simple example

MyComponent.jsx

```jsx
class MyComponent extends React.Component {
  render () {
    return <div className='myclass'></div>
  }
}

export default MyComponent
```

Output:

```jsx
class MyComponent extends React.Component {
  render () {
    return <div className='MyComponent-myclass'></div>
  }
}

export default MyComponent
```

### Complex example

MyComponent.jsx

```jsx
@connect(state => ({foo: state.foo}))
export default class MyComponent extends React.Component {
  render () {
    return (
      <div className={c(`root ${this.props.className} -hello`, {
        '-selected': true
      })}
        <div className='title'></div>
        <table className='-wide'></table>
        <div className='Avatar'></div>
        <div className={classnames('left', {})}></div>
        <div className={classnames('Topbar-left', {})}></div>
        <div className={c("body " + this.props.className)}></div>
        <div className='title'></div>
        <div className={"body " + this.props.className}></div>
      </div>
    )
  }
}
```

Output:

```jsx
@connect(state => ({foo: state.foo}))
export default class MyComponent extends React.Component {
  render () {
    return (
      <div className={c(`MyComponent ${this.props.className} -hello`, {
        '-selected': true
      })}
        <div className='MyComponent-title'>Title</div>
        <table className='-wide'></table>
        <div className='Avatar'></div>
        <div className={classnames('MyComponent-left', {})}></div>
        <div className={classnames('Topbar-left', {})}></div>
        <div className={c("MyComponent-body " + this.props.className)}></div>
        <div className='MyComponent-title'></div>
        <div className={"MyComponent-body " + this.props.className}></div>
      </div>
    )
  }
}
```

Features:
- lower-case classes are prefixed with the `ComponentName`: 
  - `title` --> `ComponentName-title`
  - `content` --> `ComponentName-content`
  - `leftListItem` --> `ComponentName-leftListItem`
- `root` is a treated as a special class name and will be replaces with the `ComponentName`:
  - `root` --> `ComponentName`
- supports `className`s which have the value of either a string or a `{}` binding:
    ```jsx
    className='title'
    className={`title ${this.props.className}`}
    className={"title " + this.props.className}
    ```
- within `{}` binding it also does the replacement if the `classnames` function is called (as `classnames` or as `c`):
    ```jsx
    className={c('title', {'-active': true})}
    className={classnames(`title ${this.props.className}`, {
      '-active': true
    }}
    ```

Ignores:
- filenames that starts from not capital letter
- modifiers (classes that starts from hyphen)
- classes that starts from capital letter

Caveats:
- the class name to replace be the very first class name within the `className` attribute.
  
  For example, in `className='Form item'` the `item` won't get prefixed:
  - `className='Form item'` --> `className='Form item'`
  
  If you want it to be prefixed, just place it first:
  - `className='item Form'` --> `className='MyComponent-item Form'`
- searches for `export default ComponentName` or `export default class ComponentName` construction to find component name

## Installation

```
npm install react-prefix-loader
```

## License

MIT

## Recommendation

* Use it with [postcss-filename-prefix](https://github.com/vmakhaev/postcss-filename-prefix) for css files

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