Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/uiwjs/react-head
- Owner: uiwjs
- License: mit
- Created: 2023-10-19T01:06:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-25T17:04:42.000Z (10 months ago)
- Last Synced: 2024-04-26T19:21:10.209Z (7 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.