Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@uiw/react-head

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-head

React components will manage your changes to the document head

1.0.4
latest
Source
npm

Version published: 11 months ago

Maintainers: 2

Created: last year

Source

react-head

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>
<!-- .... -->

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 test

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.

Keywords

FAQs

What is @uiw/react-head?

Is @uiw/react-head well maintained?

Package last updated on 14 Dec 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install