Manage emotion instances with React contexts mechanism.


200.3.24 years ago4 years agoMinified + gzip package size for @madlan145/emotion-monkey in KB


emotion-monkey 🐒 → 🦍

Manage emotion instances with React context mechanism.

You probably don't need to use this. Please refer to create-emotion for use-cases.


Using single emotion instance works almost everytime. However when you need to have multiple instances of emotion, you may face issues with storing and managing them.

Monkeys will come to the rescue! 🙉


npm i @madlan145/emotion-monkey -S


In you app's entry point:

import { EmotionProvider } from '@madlan145/emotion-monkey';
import createEmotion from 'create-emotion';

const emotion = createEmotion({});

const App: React.SFC<{}> = () => (
  <EmotionProvider emotion={emotion}>
    <Component label="Label 🐒" />

Having EmotionProvider, you can use styled as you would normally use it with react-emotion.

To use css & other stuff from emotion:

import { Emotion } from 'create-emotion';
import { injectEmotion } from '@madlan145/emotion-monkey';

const stylesheet = ({ css }: Emotion) => ({
  redButton: css`
    color: red;
  container: css`
    padding: 15px;

interface ComponentProps {
  styles: ReturnType<typeof stylesheet>;
  label: string;

const Component: React.SFC<ComponentProps> = ({ styles, label }) => (
  <div className={styles.container}>
    <button className={styles.redButton}>{label}</button>

export default injectEmotion(stylesheet)(Component);

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.