https://github.com/umbrellio/prefix-classnames
https://github.com/umbrellio/prefix-classnames
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/umbrellio/prefix-classnames
- Owner: umbrellio
- Created: 2020-08-11T14:23:06.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-20T15:09:34.000Z (almost 6 years ago)
- Last Synced: 2025-08-12T01:33:30.679Z (10 months ago)
- Language: JavaScript
- Size: 92.8 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @umbrellio/prefix-classnames
[](https://coveralls.io/github/umbrellio/prefix-classnames?branch=master)
[](https://travis-ci.com/umbrellio/prefix-classnames)
This library allows adding prefixes to classes attributes of html elements.
## Install
```sh
$ yarn add @umbrellio/prefix-classnames
```
## Usage
Imported from the library function takes one argument which will be the prefix for classes. Returns function which takes any number of arguments which can be a string, an object or an array and returns the string with the prefix.
```js
classnames(prefix: String): (...args: String | Object | Array): String => result
```
```js
import classnames from "@umbrellio/prefix-classnames"
classnames(prefix: String): (...args: String | Object | Array): String => result
const cn = classnames("prefix__")
// string arguments
cn("foo", "bar") // => "prefix__foo prefix__bar"
cn("foo", { bar: true }) // => "prefix__foo prefix__bar"
// object arguments
cn({ "foo-bar": true }) // => "prefix__foo-bar"
cn({ "foo-bar": false }) // => ""
cn({ foo: true }, { bar: true }) // => "prefix__foo prefix__bar"
cn({ foo: true, bar: true }) // => "prefix__foo prefix__bar"
// array argument
cn(["cat", { foo: true, bar: false }, "duck"]) // => "prefix__cat prefix__foo prefix__duck"
// lots of arguments of various types
cn("foo", { bar: true, duck: false }, "baz", { quux: true }); // => "prefix__foo prefix__bar prefix__baz prefix__quux"
// other and falsy types of arguments are just ignored
cn(null, false, "bar", undefined, 0, 123, { baz: null }, ""); // => "prefix__bar"
```
Usage with React component
```js
import classnames from "@umbrellio/prefix-classnames"
const cn = classnames("super-prefix__");
class Button extends React.Component {
// ...
render () {
const btnClass = cn({
btn: true,
"btn-pressed": this.state.isPressed,
"btn-over": !this.state.isPressed && this.state.isHovered
});
return {this.props.label};
}
}
```
## Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/umbrellio/prefix-classnames.
## License
Released under MIT License.
## Authors
Created by [Dmitry Tysky](https://github.com/tysky).
