@griffel/react - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

		{
		"name": "@griffel/react",
		"version": "1.0.2",
		"version": "1.0.3",
		"description": "React implementation of Atomic CSS-in-JS",
		@@ -12,3 +12,3 @@ "license": "MIT",
		"dependencies": {
		"@griffel/core": "^1.1.1",
		"@griffel/core": "^1.2.0",
		"tslib": "^2.1.0"
		@@ -15,0 +15,0 @@ },

README.md

		@@ -136,2 +136,36 @@ # Griffel for React

		## `createDOMRenderer()`, `RendererProvider`

		`createDOMRenderer` is paired with `RendererProvider` component and is useful for child window rendering and SSR scenarios. This is the default renderer for web, and will make sure that styles are injected to a document.

		```jsx
		import { createDOMRenderer, RendererProvider } from '@griffel/react';

		function App(props) {
		const { targetDocument } = props;
		const renderer = React.useMemo(() => createDOMRenderer(targetDocument), [targetDocument]);

		return (
		<RendererProvider renderer={renderer} targetDocument={targetDocument}>
		{/* Children components */}
		{/* ... */}
		</RendererProvider>
		);
		}
		```

		### styleElementAttributes

		A map of attributes that's passed to the generated style elements. For example, is useful to set ["nonce" attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce).

		```js
		import { createDOMRenderer } from '@griffel/react';

		const renderer = createDOMRenderer(targetDocument, {
		styleElementAttributes: {
		nonce: 'random',
		},
		});
		```

		## Features support
		@@ -206,1 +240,16 @@
		```

		### CSS Fallback Properties

		Any CSS property accepts an array of values which are all added to the styles.
		Every browser will use the latest valid value (which might be a different one in different browsers, based on supported CSS in that browser):

		```js
		import { makeStyles } from '@griffel/react';

		const useClasses = makeStyles({
		root: {
		overflowY: ['scroll', 'overlay'],
		},
		});
		```

New alerts