React Intl Proxy? Anyone?

[JohnMostlyR]

What's up?

As a first time traveler I am trying out Cosmos with React Boilerplate.
Now, just wondering if anyone made a proxy for React Intl?

Mkay, tell me more...

If there is none, yet, it'll be nice if there will be one, so I'll have a go at it.

[ovidiuch]

Hey @Mensae,

I used one in a project once. It's not polished but here is a minimalistic version extracted from that codebase:

export default function createIntlProxy({ messages }) {
  const IntlProxy = props => {
    const { nextProxy, fixture: { locale = 'en' } } = props;
    const { value: NextProxy, next } = nextProxy;

    return (
      <IntlProvider locale={locale} key={locale} messages={messages[locale]}>
        <NextProxy {...props} nextProxy={next()} />
      </IntlProvider>
    );
  };

  return IntlProxy;
}

Note:

• This code might have some errors as I simplified the original working one without running the new code
• Not sure what the best way to pass the locale value. In this example it's read from fixture.locale, but in my project I was storing the locale in a Redux store, so the Proxy was also connected to Redux to read that value. But this made the whole setup a bit more convoluted as the IntlProxy didn't work without the Redux proxy.

Let me know if this works and if you're interested in making an official IntlProxy out of this. It would be a great addition to Cosmos!

[JohnMostlyR]

Thanks for sharing @skidding !

I'll try it out and let you know.

[eltonio450]

Thanks ! Works like a charm :)

[callumlocke]

@skidding I vote for adding this to react-cosmos officially!

[ovidiuch]

Added a link to the proxy above for now https://github.com/react-cosmos/react-cosmos/blob/master/README.md#more-proxies

[kafkahw]

@skidding why will this proxy be published? or any documentation about the activation of this proxy?

[ovidiuch]

I'm putting all my time into Cosmos Next nowadays. But the proxy above seems to work for other people. It is always activated once you add it to your project and fixture.locale controls the mocked locale.

[kafkahw]

@sdgandhi thanks for your reply. That activation strategy seems not following what react-cosmos suggests in its doc:

Proxies can also be always-active, but it's a best practice to make proxies opt-in to avoid useless overhead.

any thoughts on this? Today is my day one using cosmos so trying to follow best practice as much as possible

[kafkahw]

For those having the same concerns as mine, here's the modified version that supports opt-in activation:

function createIntlProxy({ messages }) {
  const IntlProxy = props => {
    const { nextProxy, fixture: { intl } } = props;
    const { value: NextProxy, next } = nextProxy;
    const nextProxyEl = <NextProxy {...props} nextProxy={next()} />;

    if (!intl) {
      return nextProxyEl;
    }

    const { locale = 'en' } = intl;

    return (
      <IntlProvider locale={locale} key={locale} messages={messages[locale]}>
        {nextProxyEl}
      </IntlProvider>
    );
  };

  return IntlProxy;
}

To activate this proxy in a fixture, attribute intl should be set.

// __fixtures__/fixture1.js
export default {
  component: Component,
  intl: true, // or an object can be passed to override the default locale e.g. intl: { locale: 'fr' }
}