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 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 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({
key: 'some-key'
})
Options
createEmotion
accepts the same options as createCache from @emotion/cache
.