React components will manage your changes to the document head, like react-helmet
npm install @uiw/react-headimport React, { useState } from "react";
import Head from '@uiw/react-head';
export default function App() {
const [title, setTitle] = useState("My Title");
const click = () => setTitle(title === 'My Title' ? 'Hello World' : 'My Title')
return (
<div className="container">
<Head>
<Head.Meta charSet="utf-8" />
<Head.Title>{title}</Head.Title>
<Head.Link rel="canonical" href="https://uiwjs.github.io" />
</Head>
<button onClick={click}>
Switch Title - "{title}"
</button>
</div>
);
}import React, { useState } from "react";
import Head from '@uiw/react-head';
const css = `.box-test { color: red; }`
export default function App() {
return (
<div>
<Head.Style>{css}</Head.Style>
<Head>
<Head.Style>{css}</Head.Style>
</Head>
<div className="box-test">Text Color</div>
</div>
);
}outputs:
<head>
<style>.box-test { color: red; }</style>
<style>.box-test { color: red; }</style>
</head>
<!-- .... -->import React, { useState } from "react";
import Head from '@uiw/react-head';
export default function App() {
const [count, setCount] = useState(1);
const click = () => setCount(count + 1)
return (
<div>
<Head.Meta name="keywords" content="react-head,uiw,uiwjs" />
<Head.Meta charSet="utf-8" />
<Head.Meta name="description" content={`${count} React components will manage your changes to the document head.`} />
<button onClick={click}>
Modify Meta name=description - "{count}"
</button>
</div>
);
}outputs:
<head>
<meta name="keywords" content="react-head,uiw,uiwjs">
<meta name="description" content="1 React components will manage your changes to the document head.">
</head>
<!-- .... -->Elements that can be used inside the <head>:
<title>-><Head.Title><base>-><Head.Base><link>-><Head.Link><style>-><Head.Style><meta>-><Head.Meta>
- Dependencies in the installation package and example
npm install- To develop, run the self-reloading build:
npm run build # Compile packages 📦 @uiw/react-head
npm run watch # Real-time compilation 📦 @uiw/react-head- Run Document Website Environment:
npm run start- To contribute, please fork repos, add your patch and tests for it (in the
test/folder) and submit a pull request.
npm run testAs always, thanks to our amazing contributors!
Made with contributors.
Licensed under the MIT License.
