1.6 KiB
create-emotion
Create distinct instances of emotion.
The main emotion package can be thought of as a call to createEmotion
with sensible defaults for most applications.
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 thancss
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 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
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 from @emotion/cache
.