Instantly share code, notes, and snippets.

View LocalizeContext.js
import React from 'react';
export const LocalizeContext = React.createContext();
View LanguageSelector.test.js
import React from 'react';
import Enzyme, { mount } from 'enzyme';
// ensure you're resetting modules before each test
beforeEach(() => {
jest.resetModules();
});
// Takes the context data we want to test, or uses defaults
const getLanguageSelectorWithContext = (context = {languages: ['en', 'fr', 'es'], activeLanguage: 'en'}) => {
View LanguageSelector.jsx
import React from "react";
import { withLocalize } from "react-localize-redux";
const LanguageToggle = ({ languages, activeLanguage, setActiveLanguage }) => (
<ul className="selector">
{languages.map(lang => (
<li key={lang.code}>
<button onClick={() => setActiveLanguage(lang.code)}>
{lang.name}
</button>
View AppLocalize.js
import React from 'react';
import { LocalizeContext } from './LocalizeContext';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
activeLanguage: 'en',
languages: ['en', 'fr', 'es']
View with-connect.js
import { getTranslate, getActiveLanguage } from 'react-localize-redux';
const Greeting = ({ translate, currentLanguage }) => (
<div>
<h1>{ translate('greeting') }</h1>
<button>{ translate('farewell') }</button>
</div>
);
const mapStateToProps = state => ({
View customReducers.js
const languages = (state = [], action) => {
// reducer logic here
};
const translations = (state = {}, action) => {
// we now have access to language codes from action
const codes = action.languageCodes;
// reducer logic here
}
View combineReducers.js
const languages = (state = [], action) => {
// reducer logic here
};
const translations = (state = {}, action) => {
// reducer logic here
}
const rootReducer = combineReducers({languages, translations});
View state.js
const state = {
languages: [{code: 'en', name: 'English'}, {code: 'fr', name: 'French'}],
options: {
'hello': ['Hello', 'Bonjour'],
'goodbye': ['good bye', 'Au revoir']
}
};
View traverse.jsx
/*
I will try my best to describe what I'm trying to accomplish, and what the problem is...
react-router has a <Switch> component that loops through it's children, and assumes each child is of type <Route>.
I have created a custom <RouteByUserRoleType> that is a connected component that will render a <Route> component, if the current
user's role matches the type prop passed from the component. If it doens't match then null would be returned.
// Desired behaviour
Ideally <Switch> would traverse each child until it finds either a <Route> component, or null. If it finds a <Route> then that would be
treated like a normal <Route> component in a switch.
View languageSelector.js
import { setActiveLanguage } from 'react-localize-redux';
const LanguageSelector = ({ languages, setActiveLanguage }) => (
<ul>
{ languages.map(language =>
<li key={language.code}><button onClick={ () => setActiveLanguage(language.code) }>{ language.name }</button></li>
)}
</ul>
)