dom-casque
v1.1.0
Published
dom html tool
Downloads
10
Readme
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:
basebodyAttributeshtmlAttributeslinkmetanoscriptscriptstyletitle
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>meta
meta elements
<DomHtml>
<meta name="description" content="DomHtml application" />
<meta property="og:type" content="article" />
</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