emotion-theming - npm Package Compare versions

Comparing version 10.0.0-beta.5 to 10.0.0-beta.6

package.json

		{
		"name": "emotion-theming",
		"version": "10.0.0-beta.5",
		"version": "10.0.0-beta.6",
		"description": "A CSS-in-JS theming solution, inspired by styled-components",
		@@ -35,2 +35,4 @@ "main": "dist/index.cjs.js",
		"devDependencies": {
		"@emotion/core": "^10.0.0-beta.6",
		"@emotion/styled": "^10.0.0-beta.6",
		"@types/react": "16.3.18",
		@@ -44,4 +46,3 @@ "dtslint": "^0.3.0"
		"peerDependencies": {
		"@emotion/core": ">=10.0.0-beta",
		"react": "15.x \|\| 16.x"
		"@emotion/core": ">=10.0.0-beta"
		},
		@@ -48,0 +49,0 @@ "umd:main": "./dist/emotion.umd.min.js",

README.md

		@@ -29,23 +29,21 @@ # emotion-theming

		### TODO: Add example with the css prop
		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. This HOC gets the current theme and injects it as a "prop" into your own component.

		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 `styled`. The theme can also be accessed via passing a function to the css prop.

		The theme prop is automatically injected into components created with `styled`.

		Here is a complete example for a typical React + Emotion app (information about each piece of the theming API is listed afterward):

		```jsx
		/** child.js */
		import React from 'react'
		import styled from 'react-emotion'
		// Page.js
		import * as React from 'react'
		/** @jsx jsx */
		import { jsx } from '@emotion/core'
		import styled from '@emotion/styled'

		const Container = styled.div`
		background: whitesmoke;
		height: 100vh;
		`
		const Container = styled.div({
		background: 'whitesmoke',
		height: '100vh'
		})

		const Headline = styled.h1`
		color: ${props => props.theme.color};
		font: 20px/1.5 sans-serif;
		font-family: sans-serif;
		`
		@@ -58,2 +56,3 @@
		<Headline>I'm red!</Headline>
		<p css={theme => ({ color: theme.color })}>I'm also red!</p>
		</Container>
		@@ -64,3 +63,3 @@ )

		/** parent.js */
		// App.js
		import React from 'react'
		@@ -70,3 +69,3 @@ import ReactDOM from 'react-dom'

		import Page from './child.js'
		import Page from './Page.js'

		@@ -86,9 +85,4 @@ const theme = {
		}

		// 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
		@@ -98,8 +92,8 @@

		A React component that passes the theme object down the component tree via [context](https://reactjs.org/docs/context.html). 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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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.
		A React component that passes the theme object down the component tree via [context](https://reactjs.org/docs/context.html). Additional `ThemeProvider` components can be added deeper in the tree to override the original theme. The theme object will be merged into its ancestor as if by [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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.
		- `children`: React.Node
		- `theme`: Object\|Object => Object - An object or function that provides an object.

		@@ -134,9 +128,8 @@ ```jsx
		}

		const Text = styled.div`
		background-color: ${props => props.theme.backgroundColor}; // will be green
		color: ${props => props.theme.color}; // will be blue
		`
		```

		> Note:
		>
		> Make sure to hoist your theme out of render otherwise you may have performance problems.

		### withTheme(component: React.ComponentType): React.ComponentType
		@@ -168,3 +161,3 @@

		Thanks goes to the [styled-components team](https://github.com/styled-components/styled-components) and [their contributors](https://github.com/styled-components/styled-components/graphs/contributors) who originally wrote this.
		Thanks goes to the [styled-components team](https://github.com/styled-components/styled-components) and [their contributors](https://github.com/styled-components/styled-components/graphs/contributors) who designed this API.

		@@ -171,0 +164,0 @@ ## License

emotion-theming - npm Package Compare versions

Improved metrics

Worsened metrics