Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 5 days ago
JSON representation

React components will manage your changes to the document head

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.