Wondering what’s next for npm?Check out our public roadmap! »

    create-emotion
    TypeScript icon, indicating that this package has built-in type declarations

    10.0.27 • Public • Published

    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({
      // 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.

    Install

    npm i [email protected]

    Version

    10.0.27

    License

    MIT

    Unpacked Size

    31.5 kB

    Total Files

    16

    Homepage

    emotion.sh

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar