https://github.com/uiwjs/react-head

React components will manage your changes to the document head
https://github.com/uiwjs/react-head

head jsx react react-component react-head reactjs

Last synced: 3 months ago
JSON representation

React components will manage your changes to the document head

• Host: GitHub
• URL: https://github.com/uiwjs/react-head
• Owner: uiwjs
• License: mit
• Created: 2023-10-19T01:06:35.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-25T17:04:42.000Z (about 1 year ago)
• Last Synced: 2024-04-26T19:21:10.209Z (10 months ago)
• Topics: head, jsx, react, react-component, react-head, reactjs
• Language: TypeScript
• Homepage: https://uiwjs.github.io/react-head
• Size: 10.5 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
react-head

===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor) 

[![CI](https://github.com/uiwjs/react-head/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-head/actions/workflows/ci.yml)

[![npm version](https://img.shields.io/npm/v/@uiw/react-head.svg)](https://www.npmjs.com/package/@uiw/react-head)

[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-head.svg?style=flat&label=)](https://www.npmjs.com/package/@uiw/react-head)

[![Coverage Status](https://uiwjs.github.io/react-head/badges.svg)](https://uiwjs.github.io/react-head/lcov-report/)

React components will manage your changes to the document head, like [`react-helmet`](https://www.npmjs.com/package/react-helmet)

## Quick Start

```bash

npm install @uiw/react-head

```

### Using

```jsx mdx:preview

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 (

    


      

        

        {count} React Head

        

      

      

        Switch Title - "{count}"

      

    

  );

}

```


### Style

```jsx mdx:preview

import React, { useState } from "react";

import Head from '@uiw/react-head';

const css = `.box-test { color: red; }`

export default function App() {

  return (

    


      {css}

      

        {css}

      

      
Text Color

    

  );

}

```


outputs:

```html

  .box-test { color: red; }

  .box-test { color: red; }

```

### Meta

```jsx mdx:preview

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 (

    


      

      

      

      

        Modify Meta name=description - "{count}"

      

    

  );

}

```


Outputs:

```html

  

  

```

### Modify Favicon

```jsx

```

```jsx mdx:preview

import React, { useState } from "react";

import Head from '@uiw/react-head';

const favicon = `data:image/svg+xml,🦖`

const favicon2 = `data:image/svg+xml,🤡`

export default function App() {

  const [show, setShow] = useState(false);

  return (

    


      

       setShow(!show)}>

        Change Favicon {show ? "🦖" : "🤡"} {String(show)}

      

    

  );

}

```


Outputs:

```html

  

```

## All Sub Components

Elements that can be used inside the ``:

- [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) -> ``

- [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) -> ``

- [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) -> ``

- [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) -> `<Head.Style>`

- [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) -> `<Head.Meta>`

## Development

1. Dependencies in the installation package and example

```bash

npm install

```

2. To develop, run the self-reloading build:

```bash

npm run build  # Compile packages      📦 @uiw/react-head

npm run watch  # Real-time compilation 📦 @uiw/react-head

```

3. Run Document Website Environment:

```bash

npm run start

```

4. To contribute, please fork repos, add your patch and tests for it (in the `test/` folder) and submit a pull request.

```bash

npm run test

```

## Contributors

As always, thanks to our amazing contributors!

<a href="https://github.com/uiwjs/react-head/graphs/contributors">

  <img src="https://uiwjs.github.io/react-head/CONTRIBUTORS.svg" />

</a>

Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).

## License

Licensed under the MIT License.