# dom-casque
> dom html tool
Latest version **1.1.0** (published 2024-02-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install dom-casque
pnpm add dom-casque
yarn add dom-casque
bun add dom-casque
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-02-28 |
| First published | 2019-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 30.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex |
| Maintainers | ilex.h |
## Links
- npm: https://www.npmjs.com/package/dom-casque
- npm.io page: https://npm.io/package/dom-casque
## Dependencies (2)
- [dt2react](https://npm.io/package/dt2react.md) ^2.x
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
## Recent versions
- 1.1.0 (latest) — 2024-02-28
- 1.0.3 — 2022-06-06
- 1.0.2 — 2021-05-18
- 1.0.1 — 2019-04-29
- 1.0.0 — 2019-04-28
## README
# dom-casque
## usage
```js
import DomHtml, { withSideEffect } from 'dom-casque';
```
### basic use
```js
import React, { Component } from 'react';
import DomHtml from 'dom-casque';
export default class App extends Component {
render() {
return (
My Title
...
);
}
}
```
### multiple instances
```js
My TitleInternal changes Title
```
outputs:
```html
Internal changes Title
```
## 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)
```js
Internal changes Title
```
### titleTemplate
(optional) Useful when you want titles to inherit from a template:
```js
Internal changes Title
// outputs
Internal changes Title | MyAwesomeWebsite.com
```
### defaultTitle
(optional) used as a fallback when a template exists but a title is not defined
```js
// outputs:
My Site
```
### onChangeClientState
(optional) callback that tracks DOM changes
```js
console.log(newState, addedTags, removedTags)}
/>
```
Usefulness: This method can be set when it needs to be executed after `third JS` has been loaded.
```js
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 (
My Title
{
this.state.loadAmap &&
}
);
}
}
```
### as DomHtml children
#### html
html attributes
```js
```
#### body
body attributes
```js
```
#### title
title attributes and value
```js
My Plain Title or {`dynamic`} title
```
#### base
base element
```js
```
#### meta
meta elements
```js
```
#### link
multiple link elements
```js
{locales.map((locale) => {
})}
```
#### script
multiple script elements
```js
{/* inline script elements */}
```
#### noscript
noscript elements
```js
```
#### style
noscript elements
```js
```
## changelog
[changelog](changelog.md)
## thanks
Base on [react-helmet](https://www.npmjs.com/package/react-helmet)
other component：
* [helmet](https://www.npmjs.com/package/helmet)
* [react-helmet-async](https://www.npmjs.com/package/react-helmet-async)
* [preact-helmet](https://www.npmjs.com/package/preact-helmet)
* [react-safety-helmet](https://www.npmjs.com/package/react-safety-helmet)
* [react-html-metadata](https://www.npmjs.com/package/react-html-metadata)
## Lecense
MIT
---
_Source: https://npm.io/package/dom-casque · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._