UtilitiesReact

CSP Provider

Configures how Base UI components render inline <style> and <script> tags under a Content Security Policy: a nonce for each tag, or disableStyleElements to leave the styles out.

CSP Provider renders nothing to look at; its usage is in the code.

import type { ReactNode } from 'react'
import { CSPProvider } from '@hamur/react/csp-provider'

export default function Providers(props: { children: ReactNode }) {
  return (
    <CSPProvider>
      {props.children}
    </CSPProvider>
  )
}

8Tests passing in React · 0 failing

0.3 KiBSize

Not measured yetMemory

Not measured yetSpeed

productdevbook and 3 upstream authors5 commits · last Nov 3

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<CSPProvider />

Examples

CSPProvider has no live example: it changes the tags the components render, not how they look or behave.

API reference

3 props across 1 parts, in React syntax.

CSPProvider`CSPProvider`

Provides a default Content Security Policy (CSP) configuration for Base UI components that require inline <style> or <script> tags.

CSPProvider props
Prop	Type	Default
`disableStyleElements`Whether inline `<style>` elements created by Base UI components should not be rendered.	`boolean`	`false`
`nonce`The nonce value to apply to inline `<style>` and `<script>` tags.	`string`	`—`
`children`	`React.ReactNode`	`—`

Keyboard and accessibility

Keyboard

CSPProvider renders nothing you interact with and has no keys.

Accessibility

What the parts set
Part	Sets	So that
CSPProvider	nothing in the page; `nonce` on the inline tags of the components inside	the components keep working under a strict policy, with no change to what is read

Focus order

CSPProvider adds no element and no tab stop.