https://github.com/bamieh/react-inline-styler-processor-boilerplate
A boilerplate for creating React Inline Styler Processors.
https://github.com/bamieh/react-inline-styler-processor-boilerplate
boilerplate processor react react-inline-styler
Last synced: about 2 months ago
JSON representation
A boilerplate for creating React Inline Styler Processors.
- Host: GitHub
- URL: https://github.com/bamieh/react-inline-styler-processor-boilerplate
- Owner: Bamieh
- License: mit
- Created: 2017-03-30T14:09:10.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-29T11:07:12.000Z (almost 9 years ago)
- Last Synced: 2025-03-28T17:17:53.682Z (over 1 year ago)
- Topics: boilerplate, processor, react, react-inline-styler
- Language: JavaScript
- Homepage: https://github.com/Bamieh/react-inline-styler
- Size: 47.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Inline Styler Processor Boilerplate
A boilerplate for creating [React Inline Styler](https://github.com/Bamieh/react-inline-styler) Processors.
The boilerplate provides the following:
- easy way to write your react inline styler processor.
- configured babel for es6+.
- configured prepublish and build process.
- configured unit testing with mocha.
- configured coverage with nyc
- configured travis.
- configured coveralls and codecov.
```
git clone https://github.com/Bamieh/react-inline-styler-processor-boilerplate.git
cd react-inline-styler-processor-boilerplate
npm install
```
## Creating a processor
Creating a processor is simple, the processor is just a function that accepts 1 style object at a time, and the provided configs from the `Provider` of react inline styler.
The function returns a processed styles object
## Example
In this example we will create a processor that turns font sizes from `pixels` to `rems`.
```
import invariant from 'invariant';
export default function processor(styleObject, configs) {
const basePixelFontSize = configs.basePixelFontSize;
invariant(typeof basePixelFontSize === "undefined",
'please pass "basePixelFontSize" to the react-inline-styler` +
`Provider in order for pixelsToRem processor to work.`)
return Object.entries(styleObject).map(styleAttribute => {
const [attributeKey, attributeValue] = styleAttribute;
if(/fontSize/.test(attributeKey)) {
styleAttribute[attributeKey] = `${attributeValue/basePixelFontSize}rem`;
}
return styleAttribute;
})
}
```
## Testing
The boilerplate uses mocha for unit testing, run `npm test` to run the tests. The test files are located in the `test` directory, the `setup.js` file is used to setup mocha if needed.
```
# for single run
npm run test
#for continuous development
npm run test:watch
```
# Coverage
Unit tests are covered by [istanbul's nyc](https://github.com/istanbuljs/nyc). to run the coverage test, simply run
```
npm run coverage
```
## Todo
With the following todo list in mind, feel free to help out!
- example folder
- improve documentation