---
name: DocumentElement
---

@c4605/react-document-element

import { useState } from 'react'
import { Playground, Props } from 'docz'
import { DocumentElement, _DocumentElementInner } from './src/DocumentElement'

Introduction

Provides a declarative way to specify document.documentElement attributes in a single-page app.

This component can be used on server side (but won't produce any effect).

Built with React Side Effect.

Inspired by React Document Title.

Features

- Can be defined in many places throughout the application;
- Supports arbitrary levels of nesting, so you can set app-wide and page-specific
class name or style to document.documentElement;
- Works just as well with isomorphic apps.

Properties

Usage

{() => {
const [color, changeColor] = useState('blue')

return (
className="root-class-name"
style={{ '--font-color': 'black' }}
>


Choose text color:
changeColor(e.target.value)}>
{['green', 'blue', 'yellow'].map(color => (

{color}

))}

)
}}