Skip to content

Instantly share code, notes, and snippets.

@JamieDixon
Created November 12, 2018 11:11
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JamieDixon/e731763898c05721621b490697a33ec7 to your computer and use it in GitHub Desktop.
Save JamieDixon/e731763898c05721621b490697a33ec7 to your computer and use it in GitHub Desktop.
const themes = {
localhost: () => import('../../styles/themes/default.js'),
'client1.local.com': import('../../styles/themes/client1.js'),
'client2.local.com': import('../../styles/themes/client2.js')
};
const Select = styled.select`
position: absolute;
bottom: 1em;
left: 1em;
`;
const ThemePicker = ({ onChange }) => {
return (
<Select onChange={onChange}>
{Object.keys(themes).map(key => {
return (
<option key={key} value={key}>
{key}
</option>
);
})}
</Select>
);
};
class ThemeImporter extends React.Component {
state = {
theme: null,
domain: document.domain
};
changeDomain = e => {
this.setState({ domain: e.target.value });
};
changeTheme = async () => {
const theme = await (themes[this.state.domain] || themes.localhost)();
this.setState({ theme: theme.default });
};
componentDidMount() {
this.changeTheme();
}
componentDidUpdate(prevProps, prevState) {
if (prevState.domain === this.state.domain) {
return;
}
this.changeTheme();
}
render() {
if (!this.state.theme) {
return null;
}
return (
<ThemeProvider theme={this.state.theme}>
<div>
{document.domain === 'localhost' && (
<ThemePicker onChange={this.changeDomain} />
)}
{this.props.children}
</div>
</ThemeProvider>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment