73 lines
1.6 KiB
Markdown
73 lines
1.6 KiB
Markdown
|
# create-emotion
|
||
|
|
|
||
|
|
### Create distinct instances of emotion.
|
||
|
|
|
||
|
|
The main [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion) package can be thought of as a call to `createEmotion` with sensible defaults for most applications.
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
import createEmotion from 'create-emotion'
|
||
|
|
|
||
|
|
export const {
|
||
|
|
flush,
|
||
|
|
hydrate,
|
||
|
|
cx,
|
||
|
|
merge,
|
||
|
|
getRegisteredStyles,
|
||
|
|
injectGlobal,
|
||
|
|
keyframes,
|
||
|
|
css,
|
||
|
|
sheet,
|
||
|
|
cache
|
||
|
|
} = createEmotion()
|
||
|
|
```
|
||
|
|
|
||
|
|
### Upside
|
||
|
|
|
||
|
|
- Calling it directly will allow for some low level customization.
|
||
|
|
|
||
|
|
- Create custom names for emotion APIs to help with migration from other, similar libraries.
|
||
|
|
|
||
|
|
- Could set custom `key` to something other than `css`
|
||
|
|
|
||
|
|
### Downside
|
||
|
|
|
||
|
|
- Introduces some amount of complexity to your application that can vary depending on developer experience.
|
||
|
|
|
||
|
|
- Required to keep up with changes in the repo and API at a lower level than if using `emotion` directly
|
||
|
|
|
||
|
|
### Primary use cases
|
||
|
|
|
||
|
|
- Using emotion in embedded contexts such as an `<iframe/>`
|
||
|
|
|
||
|
|
- Setting a [nonce](/packages/cache#nonce-string) on any `<style/>` tag emotion creates for security purposes
|
||
|
|
|
||
|
|
- Use emotion with a developer defined `<style/>` tag
|
||
|
|
|
||
|
|
- Using emotion with custom stylis plugins
|
||
|
|
|
||
|
|
## Multiple instances in a single app example
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import createEmotion from 'create-emotion'
|
||
|
|
|
||
|
|
export const {
|
||
|
|
flush,
|
||
|
|
hydrate,
|
||
|
|
cx,
|
||
|
|
merge,
|
||
|
|
getRegisteredStyles,
|
||
|
|
injectGlobal,
|
||
|
|
keyframes,
|
||
|
|
css,
|
||
|
|
sheet,
|
||
|
|
cache
|
||
|
|
} = createEmotion({
|
||
|
|
// The key option is required when there will be multiple instances in a single app
|
||
|
|
key: 'some-key'
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
## Options
|
||
|
|
|
||
|
|
`createEmotion` accepts the same options as [createCache](/packages/cache#options) from `@emotion/cache`.
|