Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
emotion-theming
Advanced tools
emotion-theming
A CSS-in-JS theming solution for React(-like) views.
emotion-theming is a theming library inspired by styled-components
Table of Contents
Install
# add --save if using npm@4 or lower
npm i emotion-theming
# or
yarn add emotion-theming
Usage
Theming is accomplished by placing the ThemeProvider component, at the top of the React component tree and wrapping descendants with the withTheme higher-order component (HOC). This HOC seamlessly acquires the current theme and injects it as a "prop" into your own component.
The theme prop is automatically injected into components created with react-emotion's styled.
Here is a complete example for a typical React + Emotion app (information about each piece of the theming API is listed afterward):
/** child.js */
import React from 'react';
import styled from 'react-emotion';
const Container = styled.div`
background: whitesmoke;
height: 100vh;
`;
const Headline = styled.h1`
color: ${props => props.theme.color};
font: 20px/1.5 sans-serif;
`;
export default Page extends React.Component {
render() {
return (
<Container>
<Headline>
I'm red!
</Headline>
</Container>
);
}
}
/** parent.js */
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'emotion-theming';
import Page from './child.js';
const theme = {
color: 'red',
};
class App extends React.Component {
render() {
return (
<ThemeProvider theme={theme}>
<Page />
</ThemeProvider>
);
}
}
// this assumes the HTML page template has a <main> element already inside <body>
ReactDOM.render(<App />, document.querySelector('main'));
<ThemeProvider> acts as a conductor in the component hierarchy and themed components receive the theme for whatever purposes are necessary, be it styling or perhaps toggling a piece of functionality.
API
ThemeProvider: ReactComponent
A React component that passes the theme object down the component tree via context. Additional <ThemeProvider> wrappers may be added deeper in the hierarchy to override the original theme. The theme object will be merged into its ancestor as if by Object.assign. If a function is passed instead of an object it will be called with the ancestor theme and the result will be the new theme.
Accepts:
children: ReactComponent - A single React component.theme: Object|Function - An object or function that provides an object.
import React from 'react';
import styled from 'react-emotion'
import { ThemeProvider, withTheme } from 'emotion-theming';
// object-style theme
const theme = {
backgroundColor: 'green',
color: 'red',
};
// function-style theme; note that if multiple <ThemeProvider> are used,
// the parent theme will be passed as a function argument
const adjustedTheme = ancestorTheme => ({ ...ancestorTheme, color: 'blue' });
class Container extends React.Component {
render() {
return (
<ThemeProvider theme={theme}>
<ThemeProvider theme={adjustedTheme}>
<Text>
Boom shaka laka!
</Text>
</ThemeProvider>
</ThemeProvider>
);
}
}
const Text = styled.div`
background-color: ${props => props.theme.backgroundColor}; // will be green
color: ${props => props.theme.color}; // will be blue
`;
withTheme(component: ReactComponent): Function
A higher-order component that provides the current theme as a prop to the wrapped child and listens for changes. If the theme is updated, the child component will be re-rendered accordingly.
import PropTypes from 'prop-types';
import React from 'react';
import { withTheme } from 'emotion-theming';
class TellMeTheColor extends React.Component {
render() {
return (
<div>
The color is {this.props.theme.color}.
</div>
);
}
}
TellMeTheColor.propTypes = {
theme: PropTypes.shape({
color: PropTypes.string,
}),
};
const TellMeTheColorWithTheme = withTheme(TellMeTheColor);
channel: String
The emotion-theming package uses this string as the React context key by default.
If you wish to build your own components on top of this library, it is recommended to import the context key from this package instead of hardcoding its value.
import { channel } from 'emotion-theming';
console.log(channe;); '__EMOTION_THEMING__';
Credits
Thanks goes to the styled-components team and their contributors who originally wrote this.
License
MIT 2017-present
FAQs
A CSS-in-JS theming solution, inspired by styled-components
The npm package emotion-theming receives a total of 337,789 weekly downloads. As such, emotion-theming popularity was classified as popular.
We found that emotion-theming demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Package last updated on 30 Sep 2017
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025