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

0.0.1
Source
npm

Version published: last year

Weekly downloads: 335; decreased by-68.69%

Maintainers: 2

Weekly downloads

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 [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>
  );
}

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

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 popular?

Is @uiw/react-head well maintained?

Package last updated on 19 Oct 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