Skip to content

Commit e48d67b

Browse files
author
Kye Hohenberger
authored
Update README.md
1 parent 894093e commit e48d67b

File tree

1 file changed

+54
-3
lines changed

1 file changed

+54
-3
lines changed

packages/create-emotion/README.md

+54-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,59 @@
11
# create-emotion
22

3-
> Create instances of emotion.
3+
### Create distinct instances of emotion.
4+
5+
The main [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion) repo can be thought of as a call to `createEmotion` with sensible defaults for most applications.
6+
7+
```javascript
8+
import createEmotion from 'create-emotion'
9+
10+
const context = typeof global !== 'undefined' ? global : {}
11+
12+
export const {
13+
flush,
14+
hydrate,
15+
cx,
16+
merge,
17+
getRegisteredStyles,
18+
injectGlobal,
19+
keyframes,
20+
css,
21+
sheet,
22+
caches
23+
} = createEmotion(context)
24+
25+
```
26+
27+
### Upside
28+
29+
- Calling it directly will allow for some low level custimization.
30+
31+
- Create custom names for emotion APIs to help with migration from other, similar libraries.
32+
33+
- Could set custom `key` to `👩‍🎤`, `🥞`, `⚛️`, `👩‍🎨`
34+
35+
### Downside
36+
37+
- Introduces some amount of complexity to your application that can vary depending on developer experience.
38+
39+
- Required to keep up with changes in the repo and API at a lower level than if using `emotion` directly
40+
41+
42+
### Primary use cases
43+
44+
- Using emotion in embedded contexts such as an `<iframe/>`
45+
46+
- Setting a [nonce]() on any `<style/>` tag emotion creates for security purposes
47+
48+
- Use emotion with a developer defined `<style/>` tag
49+
50+
- Using emotion with custom stylis plugins
51+
52+
### Advanced use cases
53+
54+
- Using emotion in component libraries to sync up multiple intances of emotion together
55+
456

5-
`create-emotion` allows you to create instances of emotion to use instead of the default `emotion` package. `create-emotion` is **only** needed if you are using emotion in a place where code is being embedded that could use emotion, you need to set a nonce, you need to use custom stylis plugins or you need to customize prefixing.
657

758
```jsx
859
import createEmotion from 'create-emotion'
@@ -30,7 +81,7 @@ export const {
3081
`emotion` requires a global object for server-side rendering to ensure that even if a module is calling an emotion instance from two paths(e.g. the same emotion instance in multiple node_modules, this can happen often with linking [#349](https://github.com/emotion-js/emotion/issues/349)) they'll still both work with SSR. If you aren't using SSR, `context` can be an empty object. This isn't required in the browser because your bundler should deduplicate modules.
3182

3283

33-
## Example instance if there must be multiple instances in a single app
84+
## Multiple instances in a single app example
3485

3586
```jsx
3687
import createEmotion from 'create-emotion'

0 commit comments

Comments
 (0)