react-head
React components will manage your changes to the document head, like react-helmet
Quick Start
npm install @uiw/react-headUsing
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 className="container">
<Head>
<Head.Meta charSet="utf-8" />
<Head.Title>{count} React Head</Head.Title>
<Head.Link rel="canonical" href="https://uiwjs.github.io" />
</Head>
<button onClick={click}>
Switch Title - "{count}"
</button>
</div>
);
}Style
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>
<!-- .... -->Meta
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>Modify Favicon
<Head.Link rel="icon" href="/favicon.ico" />
<Head.Link rel="icon" type="image/svg+xml" href="/favicon.svg" />import React, { useState } from "react";
import Head from '@uiw/react-head';
const favicon = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦖</text></svg>`
const favicon2 = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤡</text></svg>`
export default function App() {
const [show, setShow] = useState(false);
return (
<div>
<Head.Link rel="icon" type="image/svg+xml" href={show ? favicon : favicon2} />
<button onClick={() => setShow(!show)}>
Change Favicon {show ? "🦖" : "🤡"} {String(show)}
</button>
</div>
);
}Outputs:
<head>
<link data-head="true" rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤡</text></svg>" />
</head>All Sub Components
Elements that can be used inside the <head>:
-
<title>-><Head.Title> -
<base>-><Head.Base> -
<link>-><Head.Link> -
<style>-><Head.Style> -
<meta>-><Head.Meta>
Development
- 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 testContributors
As always, thanks to our amazing contributors!
Made with contributors.
License
Licensed under the MIT License.