Skip to content

Commit

Permalink
@emotion/cache docs - added docs for createCache insertionPoint optio…
Browse files Browse the repository at this point in the history
…n to the site
  • Loading branch information
Git-I985 committed Mar 1, 2024
1 parent 6e0e388 commit c8609df
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/khaki-beds-repair.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'emotion-site': patch
---

@emotion/cache add docs for createCache insertionPoint option
33 changes: 33 additions & 0 deletions packages/cache/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,41 @@ The prefix before class names. It will also be set as the value of the `data-emo

A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes or windows.

### `insertionPoint`

`Node`

This defines specific dom node after which the rules are inserted into the container. You can use a meta tag to specify the specific location:

```jsx
const head = document.querySelector('head')

// <meta name="emotion-insertion-point" content="">
const emotionInsertionPoint = document.createElement('meta')
emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
emotionInsertionPoint.setAttribute('content', '')

head.appendChild(emotionInsertionPoint)

// the emotion sheets should be inserted right after the meta tag
const cache = createCache({
key: 'my-app',
insertionPoint: emotionInsertionPoint
})

function App() {
return (
<CacheProvider value={cache}>
<Main />
</CacheProvider>
)
}
```

### `prepend`

`boolean`

**Deprecated:** Please use `insertionPoint` option instead.

A boolean representing whether to prepend rather than append style tags into the specified container DOM node.

0 comments on commit c8609df

Please sign in to comment.