How to use @emotion/cache - 10 common examples

To help you get started, we’ve selected a few @emotion/cache examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github emotion-js / emotion / scripts / benchmarks / src / implementations / emotion-next / Provider.js View on Github external
// @flow
import * as React from 'react'
import { CacheProvider } from '@emotion/core'
import createCache from '@emotion/cache'

let cache = createCache()

export default (props: { children: React.Node }) => {
  return <CacheProvider value={cache}>{props.children}</CacheProvider>
}
github emotion-js / emotion / packages / core / src / context.js View on Github external
) => {
          return func(props, cache, ref)
        }}
      </EmotionCacheContext.Consumer>
    )
  }
  // $FlowFixMe
  return React.forwardRef(render)
}

if (!isBrowser) {
  class BasicProvider extends React.Component<
    { children: EmotionCache => React.Node },
    { value: EmotionCache }
  > {
    state = { value: createCache() }
    render() {
      return (
        <EmotionCacheContext.Provider {...this.state}>
          {this.props.children(this.state.value)}
        </EmotionCacheContext.Provider>
      )
    }
  }

  withEmotionCache = function withEmotionCache<Props>(
    func: (props: Props, cache: EmotionCache) => React.Node
  ): React.StatelessFunctionalComponent<Props> {
    return (props: Props) => (
      <EmotionCacheContext.Consumer>
        {context => {
          if (context === null) {
github emotion-js / emotion / packages / core / __tests__ / custom-cache.js View on Github external
test('emotion plugins - @styled-system/css', () => {
  let cache = createCache({
    emotionPlugins: [styledSystemCss]
  })

  expect(
    render(
      <CacheProvider value={cache}>
        <div
          css={{
            fontSize: [4, 5, 6],
            color: 'primary',
            bg: 'gray',
            '&:hover': {
              color: 'secondary'
            }
          }}
        />
github emotion-js / emotion / packages / core / __tests__ / server.js View on Github external
opts => {
    let cache = createCache()
    if (opts.cache) {
      cache = opts.cache()
    }
    let { renderStylesToString } = createEmotionServer(cache)
    expect(
      renderStylesToString(
        renderToString(
          <CacheProvider value={cache}>{opts.render()}</CacheProvider>
        )
      )
    ).toMatchSnapshot()
  },
  cases
github emotion-js / emotion / packages / core / __tests__ / keyframes.js View on Github external
opts => {
    safeQuerySelector('head').innerHTML = ''
    let cache = createCache()
    expect(
      renderer
        .create(<CacheProvider value={cache}>{opts.render()}</CacheProvider>)
        .toJSON()
    ).toMatchSnapshot()
    expect(
      throwIfFalsy(cache.sheet.tags).map(tag => tag.textContent || '')
    ).toMatchSnapshot()
    cache.sheet.flush()
  },
  {
github egoist / vue-emotion / src / index.js View on Github external
beforeCreate() {
      this.$emotionCache = (this.$parent && this.$parent.$emotionCache) || createCache()
      this.$emotionCache.compat = true
    }
  })
github egoist / vue-emotion / src / shared.js View on Github external
export const getCache = () => {
  if (IS_BROWSER) {
    cache = cache || createCache()
    return cache
  }

  return createCache()
}
github emotion-js / next / packages / provider / src / index.js View on Github external
consumer = (context: CSSContextType | null) => {
    if (this.props.cache !== undefined) {
      context = this.props.cache
    }
    let newContext = context
    if (context === null) {
      if (this.emotionCache === undefined) {
        newContext = createCache()
        if (this.props.theme) {
          newContext.theme = getTheme(this.props.theme, undefined)
        }
      } else if (
        this.props.theme &&
        this.props.theme !== this.emotionCache.theme
      ) {
        newContext = {
          ...this.emotionCache,
          theme: getTheme(this.props.theme, undefined)
        }
      }
    } else if (this.props.theme && this.props.theme !== context.theme) {
      newContext = {
        ...context,
        theme: getTheme(this.props.theme, context.theme)
github evergarden-ui / evergarden / packages / emotion / src / index.js View on Github external
beforeCreate() {
      this.$emotionCache = this.$parent && this.$parent.$emotionCache || createCache()
      this.$emotionCache.compat = true
    }
  })
github saltyshiomix / react-ssr / packages / core / lib / webpack / emotion.js View on Github external
import React from 'react';
import ReactDOM from 'react-dom';
import { CacheProvider } from '@emotion/core';
import createCache from '@emotion/cache';
import LZString from 'lz-string';
import URLSafeBase64 from 'urlsafe-base64';
import Page from '__REACT_SSR_PAGE__';

const getProps = () => {
  const compressedProps = document.getElementById('react-ssr-script').dataset.props;
  const decoded = URLSafeBase64.decode(compressedProps);
  const decompressed = LZString.decompressFromUint8Array(decoded);
  return JSON.parse(decompressed);
}

const cache = createCache();

ReactDOM.render(
  <CacheProvider value={cache}>
    <Page {...getProps()} />
  </CacheProvider>,
  document.getElementById('react-ssr-root'),
);

if (module.hot) {
  module.hot.accept();
}

@emotion/cache

emotion's cache

MIT
Latest version published 1 month ago

Package Health Score

92 / 100
Full package analysis

Popular @emotion/cache functions

Similar packages