0.0.2 • Published 7 years ago
retheme v0.0.2
retheme
Functions for theming components.
WIP
I want a tiny, framework-agnostic way to get a big theme object into components, whether inline on wrapped around a component.
Next is to explores how this integrates with popular style libs, lib and UMD builds.
Example 1
Use Theme
and withTheme
from Context-based theming.
import { Theme, withTheme } from "./retheme";
const ThemedThing = withTheme(({ theme, ...props }) =>
<div {...props}>{theme.blue}</div>
);
const App = props =>
<Theme theme={{ blue: "blue" }}>
<ThemedThing />
</Theme>;
export default App;
Example 2
Use Theme
's children
callback for with inline access to theme properties.
import { Theme } from "./retheme";
const App = props =>
<Theme theme={{ blue: "blue" }}>
{theme =>
<div>
<div>{theme.blue}</div>
</div>}
</Theme>;
export default App;
Example 3
Use retheme
to apply a theme object to a component.
import { retheme } from "./retheme"
const App = ({ theme, ...props }) =>
<div {...props}>
blue {theme.primary}
</div>;
export default retheme({ primary: "blue" })(App);
Example 3
Use retheme
with both wrapped theme object and Context simultaniously.
const ThemedThing = withTheme(({ theme, ...props }) =>
<div {...props}>{theme.primary}</div>
);
const App = ({ theme, ...props }) =>
<div {...props}>
blue: {theme.primary}
<ThemedThing />
</div>;
export default retheme({ primary: "blue" })(App);