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

return (
  <DocumentElement
    className="root-class-name"
    style={{ '--font-color': 'black' }}
  >
    <DocumentElement style={{ '--font-color': color }} />
    <label>
      Choose text color:
      <select value={color} onChange={e => changeColor(e.target.value)}>
        {['green', 'blue', 'yellow'].map(color => (
          <option key={color} value={color}>
            {color}
          </option>
        ))}
      </select>
    </label>
    <div style={{ color: 'var(--font-color)' }}>Some text</div>
  </DocumentElement>
)

}}