|
1 | 1 | # create-emotion
|
2 | 2 |
|
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 | + |
4 | 56 |
|
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. |
6 | 57 |
|
7 | 58 | ```jsx
|
8 | 59 | import createEmotion from 'create-emotion'
|
@@ -30,7 +81,7 @@ export const {
|
30 | 81 | `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.
|
31 | 82 |
|
32 | 83 |
|
33 |
| -## Example instance if there must be multiple instances in a single app |
| 84 | +## Multiple instances in a single app example |
34 | 85 |
|
35 | 86 | ```jsx
|
36 | 87 | import createEmotion from 'create-emotion'
|
|
0 commit comments