@fela-next/fela-identifier v12.0.3
fela-identifier
This enhancer allows you to create rules for which the renderer will generate unique class names.
Installation
yarn add fela-identifier
You may alternatively use npm i --save fela-identifier
.
Problem
Sometimes it is necessary to additionally stylize (for example, highlight) some DOM element when manipulating (for example, when hovering) with the parent. In classical CSS this would look something like this:
.parent-element:hover .child-element {
background-color: red;
}
But with Fela, this is not so easy, because you do not assign classes yourself.
Solution
Create a rule for which the renderer will predictably generate the same unique class name.
Usage
import { createRenderer } from '@fela-next/fela'
import createIdentifier from '@fela-next/fela-identifier'
const identifier = createIdentifier()
const renderer = createRenderer({
enhancers: [ identifier ]
})
const childElementRule = identifier()
const parentElementRule = () => ({
[`:hover .${childElementRule}`]: {
backgroundColor: 'red',
}
})
renderer.renderRule(childElementRule)
// => 'fela-identifier-0'
renderer.renderRule(parentElementRule)
// => 'a'
outputs
.a:hover .fela-identifier-0 {
background-color: red
}
API
The module exports a function that creates an identifier
. The identifier
is both an enhancer and a factory of unique rules. As a factory of unique rules, the identifier
has the following API:
Arguments
name
(String): This is a string that can be used to produce an identifier. Sometimes this is convenient for debugging or visibility.
Returns
(Function): A Fela rule that can be rendered. It also has a field className
and an overridden method toString
that returns the same value as the field className
. You can use it like this:
import createIdentifier from '@fela-next/fela-identifier'
const identifier = createIdentifier()
const rule = identifier()
const className = rule.className
rule.toString()
!!!Attention!!!
Do not use the identifier
as a factory before you connect it as an enhancer. This will result in a runtime error.
Configuration
Options
Option | Value | Default | Description |
---|---|---|---|
prefix | (string) | fela-identifier | a prefix to be inserted at the beginning of the identifying class |
generator | (name : string, index : number) => string | just returns the index | function that is responsible for generating identifiers based on the name and index |
Example
import { createRenderer } from '@fela-next/fela'
import createIdentifier from '@fela-next/fela-identifier'
import uuidv4 from 'uuid/v4'
import hash from 'object-hash'
const identifier = createIdentifier({
prefix: 'my-custom-prefix',
generator: (name, index) => `${hash([name, index])}-${uuidv4()}`,
})
const renderer = createRenderer({
enhancers: [ identifier ]
})
Examples
Usage with react-fela
:
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Provider, connect } from '@fela-next/react-fela'
import { createRenderer } from '@fela-next/fela'
import createIdentifier from '@fela-next/fela-identifier'
export const identifier = createIdentifier()
export const renderer = createRenderer({
enhancers: [ identifier ],
})
let Component = ({ styles }) => (
<div className={styles.parent}>
Some Parent Content
<div className={styles.child}>
Some Child Content
</div>
</div>
)
const child = identifier()
Component = connect({
parent: {
[`:hover .${child}`]: {
backgroundColor: 'red',
}
},
child
})(Component)
ReactDOM.render(
<Provider renderer={renderer}>
<Component />
</Provider>,
document.getElementById("root"),
)
You can combine identifying rules with styles and with each other:
import { createRenderer, combineRules } from '@fela-next/fela'
import createIdentifier from '@fela-next/fela-identifier'
export const identifier = createIdentifier()
export const renderer = createRenderer({
enhancers: [ identifier ],
})
const firstId = identifier('first')
const secondId = identifier('second')
const someStyle = () => ({
fontSize: '20px',
backgroundColor: 'red',
})
const combinedRule = combineRules(
firstId,
secondId,
someStyle,
)
renderer.renderRule(combinedRule)
// => 'a b fela-identifier-first-0 fela-identifier-second-1'
License
Fela is licensed under the MIT License. Documentation is licensed under Creative Common License. Created with ♥ by @robinweser and all the great contributors.