CSP Provider

CSPProvider

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

Import

import { CSPProvider } from '@base-ui/react/csp-provider';

Component Signature

function CSPProvider(props: CSPProvider.Props): React.ReactElement

Props

React.ReactNode

The content to be wrapped by the CSP provider.

string | undefined

The nonce value to apply to inline <style> and <script> tags.

boolean | undefined

default:"false"

Whether inline <style> elements created by Base UI components should not be rendered. Instead, components must specify the CSS styles via custom class names or other methods.

Type Definitions

CSPProvider.Props

interface CSPProviderProps {
  children?: React.ReactNode;
  nonce?: string | undefined;
  disableStyleElements?: boolean | undefined;
}

CSPProvider.State

interface CSPProviderState {}

Usage Example

import { CSPProvider } from '@base-ui/react/csp-provider';

function App() {
  return (
    <CSPProvider nonce="your-nonce-value" disableStyleElements={false}>
      {/* Your Base UI components */}
    </CSPProvider>
  );
}

CSP Provider Guide

Components API

Utilities API

CSPProvider

Import

Component Signature

Props

Type Definitions

CSPProvider.Props

CSPProvider.State

Usage Example

​CSPProvider

​Import

​Component Signature

​Props

​Type Definitions

​CSPProvider.Props

​CSPProvider.State

​Usage Example

​Related

CSPProvider

Import

Component Signature

Props

Type Definitions

CSPProvider.Props

CSPProvider.State

Usage Example

Related