Skip to main content

Command Palette

Search for a command to run...

Today's npm package: theming

Published
โ€ข1 min read
Today's npm package: theming
P

I am developer from India currently based in Berlin, Germany.

I am very interested in Design, though I don't design ๐Ÿ˜‰ I take care of it while making my apps.

Photography, videography and having random conversation over beer are my activities of spare time. Timelapses and hyperlapses make me wonder all the time ๐Ÿ˜Š

Today's npm package is theming

With rise of CSS-in-JS, managing and maintaining the design tokens can be hard.

Today's package theming will help you manage the design tokens for your React project with CSS-in-JS in consistent way.

Here is a small example of injecting and using design tokens as theme to React App.

import React from 'react';
import { ThemeProvider, withTheme } from 'theming';

const DemoBox = props => {
  console.log(props.theme);
  return (<div />);
}

const ThemedDemoBox = withTheme(DemoBox);

const theme = {
  color: 'black',
  background: 'white',
};

const App = () => (
  <ThemeProvider theme={theme}>
    <ThemedDemoBox /> {/* { color: 'black', background: 'white' } */}
  </ThemeProvider>
)

export default App;

Stay tuned for tomorrow's package of the Day.

More from this blog

P

Pankaj Patel - @heypankaj_

63 posts

Sharing my learnings and thoughts on Blogging, Personal Branding and Programming