Skip to content

React components will manage your changes to the document head

License

Notifications You must be signed in to change notification settings

uiwjs/react-head

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

24 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

react-head

Buy me a coffee CI npm version NPM Downloads Coverage Status

React components will manage your changes to the document head, like react-helmet

Quick Start

npm install @uiw/react-head

Using

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>:

Development

  1. Dependencies in the installation package and example
npm install
  1. To develop, run the self-reloading build:
npm run build  # Compile packages      πŸ“¦ @uiw/react-head
npm run watch  # Real-time compilation πŸ“¦ @uiw/react-head
  1. Run Document Website Environment:
npm run start
  1. To contribute, please fork repos, add your patch and tests for it (in the test/ folder) and submit a pull request.
npm run test

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.