Skip to content

Commit 3983d53

Browse files
committed
fix(readme.md): incomplete usage
elaborates on usage with styled-components as well as advanced usage for generating parsers and parsing other types of case conventions
1 parent 2ddf5e2 commit 3983d53

File tree

1 file changed

+52
-5
lines changed

1 file changed

+52
-5
lines changed

README.md

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@
44
![codecov](https://img.shields.io/codecov/c/github/Tbhesswebber/style-object-to-css-string.svg?logo=codecov&style=popout-square)
55
![Commitizen friendly](<https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=popout-square&logo=travis&logoColor=rgba(0,0,0,0)>)
66

7-
This project was inspired by some work with the [:nail_care:styled components](https://www.styled-components.com/) library. In creating a component that I will never use, I needed to provide the consumer with a way to pass down styles that I can then merge into various component definitions above my own css rules.
7+
This project was inspired by some work with the [:nail_care:styled components](https://www.styled-components.com/) library. In creating a component that I will never use, I needed to provide the consumer with a way to pass down styles that I can then merge into various component definitions along with my own css rules.
88

9-
Just in case, this package also exposes the ability to generate additional syntax parsers that can then be used with the primary export or as stand-alone string parsing functions.
9+
Just in case, this package also exposes the ability to access or generate additional syntax parsers that can then be used with the primary export or as stand-alone string parsing functions.
1010

1111
## Usage
1212

1313
### Basic Usage
1414

15+
#### Without styled-components
16+
1517
```javascript
1618
import styleToCss from 'style-obj-to-css-string';
1719
// I now regret my choice in package name
@@ -26,7 +28,52 @@ const styles = {
2628
const styleString = styleToCss(styles);
2729
/**
2830
* Generates all values as a single semicolon separated string
29-
* "display: flex;flex-direction: column;align-items: center;justify-content: center;"/
31+
* "display: flex;flex-direction: column;align-items: center;justify-content: center;"
32+
*/
33+
```
34+
35+
#### With :nail_care:styled-components
36+
37+
```javascript
38+
import styled from 'styled-components';
39+
import styleToCss from 'style-obj-to-css-string';
40+
41+
const StyledThingy = styled.p`
42+
${/* Place properties that you will allow to be overwritten here - typically stylistic properties */}
43+
color: meduimaquamarine;
44+
font-size: 1rem;
45+
background-color: thistle;
46+
${props => props.styles && styleToCss(props.styles) /* we check for styles to avoid an invocation with undefined. may be fixed with future pull requests. */}
47+
${/* Place properties that you will not allow to change here - typically structural properties */}
48+
display: block;
49+
margin: 1rem;
50+
grid-column: 1 / -1;
51+
`;
52+
```
53+
54+
### Advanced Usage
55+
56+
This library can also be useful in parsing JSON from servers that might use other case-conventions. Simply bring in our list of `parsers` in your import or make your own with our `createParser` function!
57+
58+
**parsers** - An object containing multiple parse methods.
59+
60+
- parsers.snakeToKebab( str: string ): string - converts snake_case to kebab-case
61+
- parsers.camelToKebab( str: string ): string - converts camelCase to kebab-case
62+
63+
**createParser** - A function that return a parsing function.
64+
65+
- createParser(matcher: string | RegExp, replacer: Function): Function - generates a parser function as seen in parsers. Note: replacer uses the same syntax as the second parameter for [String.prototype.replace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter) (the first argument is the matched value)
66+
67+
```javascript
68+
import styleToCss, { parsers, createParser } from 'style-to-css-string';
69+
import axios from 'axios';
70+
71+
const kebabToCamel = createParser(/-[a-z]/, match => match.split('')[1].toUpperCase());
72+
73+
async function getStyleObj(path) {
74+
const style = await axios.get(path);
75+
const styleString = styleToCss(style, parsers.snakeToKebab);
76+
}
3077
```
3178

3279
## Contributing
@@ -51,6 +98,6 @@ $ npm run validate
5198

5299
I use [commitlint](https://github.com/conventional-changelog/commitlint) to lint git commits according to the [conventional changelog](https://github.com/conventional-changelog/commitlint/blob/master/%40commitlint/config-conventional/README.md). If you're as lazy as I am, feel free to use [commitizen cli](https://github.com/commitizen/cz-cli) either with your own installation or with `npm run cz` - if your commit still fails commitlint's rules, you can run `npm run cz -- --retry`.
53100

54-
#### :fire_engine:In Case of Emergency:fire_engine:
101+
#### :fire:In Case of Emergency:fire:
55102

56-
Just in case something happens that forces you to run away from your computer screaming, just run `npm run fire`, which will create a new branch called "emergency", commit all of your current changes, and then push them to a new branch on your origin remote.
103+
Just in case something happens that forces you to run away from your computer screaming, just run `npm run fire`, which will create a new branch called "emergency", commit all of your current changes, and then push them to a new branch on your origin remote. :fire_engine:

0 commit comments

Comments
 (0)