Dom-casque NPM

dom-casque

usage

import DomHtml, { withSideEffect } from 'dom-casque';

basic use

import React, { Component } from 'react';
import DomHtml from 'dom-casque';

export default class App extends Component {

  render() {
    return (
      <div className="application">
        <DomHtml>
          <meta charSet="utf-8" />
          <title>My Title</title>
          <link rel="canonical" href="http://mysite.com/example" />
        </DomHtml>
        ...
      </div>
    );
  }
}

multiple instances

<Parent>
  <DomHtml>
    <title>My Title</title>
    <meta name="description" content="DomHtml application" />
  </DomHtml>

  <Child>
    <DomHtml>
      <title>Internal changes Title</title>
      <meta name="description" content="Internal changes component" />
    </DomHtml>
  </Child>
</Parent>

outputs:

<head>
    <title>Internal changes Title</title>
    <meta name="description" content="Internal changes component">
</head>

apis

This DomHtml instance contains the following properties:

base
bodyAttributes
htmlAttributes
link
meta
noscript
script
style
title

Reference Guide

as DomHtml attributes

encodeSpecialCharacters

(optional) set to false to disable string encoding (server-only)

<DomHtml
  encodeSpecialCharacters={true}
>
<title>Internal changes Title</title>
</DomHtml>

titleTemplate

(optional) Useful when you want titles to inherit from a template:

<DomHtml
  titleTemplate="%s | MyAwesomeWebsite.com"
>
<title>Internal changes Title</title>
</DomHtml>

// outputs
<head>
  <title>Internal changes Title | MyAwesomeWebsite.com</title>
</head>

defaultTitle

(optional) used as a fallback when a template exists but a title is not defined

<DomHtml
  defaultTitle="My Site"
  titleTemplate="My Site - %s"
/>

// outputs:

<head>
  <title>My Site</title>
</head>

onChangeClientState

(optional) callback that tracks DOM changes

<DomHtml
  onChangeClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)}
/>

Usefulness: This method can be set when it needs to be executed after third JS has been loaded.

import React, { Component } from 'react';
import DomHtml from 'dom-casque';
import AMapCom from './AMapCom';

export default class AmapDemo extends Component {
  constructor(props){
    super(props);
    this.state = {
      loadAmap: false
    };
  }

  onDomChange = (newState, addedTags = {}, removedTags) => {
    // console.log(newState, addedTags, removedTags);
    const me = this;
    const amapScript = (addedTags.scriptTags || []).find(s => s.id === 'amapScripts');
    if (amapScript){
      amapScript.onload = amapScript.onreadystatechange = function(){
        if (amapScript.ready) {
          return false;
        }
        if (!amapScript.readyState || amapScript.readyState === 'loaded' || amapScript.readyState === 'complete') {
          amapScript.ready = true;
          me.setState({
            loadAmap: true
          });
        }
      };
    }

  render() {
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <DomHtml onChangeClientState={this.onDomChange}>
          <meta charSet="utf-8" />
          <title>My Title</title>
          <script id="amapScripts" type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=your_sdk_key" />
        </DomHtml>
        {
          this.state.loadAmap && <AMapCom />
        }
      </div>
    );
  }
}

as DomHtml children

html

html attributes

<DomHtml>
  <html lang="en" amp />
</DomHtml>

body

body attributes

<DomHtml>
  <body className="root" />
</DomHtml>

title

title attributes and value

<DomHtml>
  <title itemProp="name" lang="en">My Plain Title or {`dynamic`} title</title>
</DomHtml>

base

base element

<DomHtml>
  <base target="_blank" href="http://mysite.com/" />
</DomHtml>

link

multiple link elements

<DomHtml>
  <link rel="canonical" href="http://mysite.com/example" />
  <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png" />
  {locales.map((locale) => {
    <link rel="alternate" href="http://example.com/{locale}" hrefLang={locale} key={locale}/>
  })}
</DomHtml>

script

multiple script elements

<DomHtml>
  <script src="http://include.com/pathtojs.js" type="text/javascript" />
  {/* inline script elements */}
  <script type="application/ld+json">
   {`
      {
        "@context": "http://schema.org"
      }
  `}
  </script>
</DomHtml>

noscript

noscript elements

<DomHtml>
  <noscript>
  {`
    <link rel="stylesheet" type="text/css" href="foo.css" />
  `}
  </noscript>
</DomHtml>

style

noscript elements

<DomHtml>
  <style type="text/css">
  {`
    body {
        background-color: blue;
    }

    p {
        font-size: 12px;
    }
  `}
  </style>
</DomHtml>

changelog

thanks

Base on react-helmet

other component：

Lecense

MIT

prop-types dt2react

@infinitebrahmanuniverse/nolb-dom-@everything-registry/sub-chunk-1499 @rayb/npmns-ui amos-framework

2 months ago

2 years ago

3 years ago

5 years ago

5 years ago