https://github.com/react-sandbox/react-use-favicon
✨ Dynamic page favicon hook
https://github.com/react-sandbox/react-use-favicon
favicons hook react react-hook typescript
Last synced: 4 months ago
JSON representation
✨ Dynamic page favicon hook
- Host: GitHub
- URL: https://github.com/react-sandbox/react-use-favicon
- Owner: react-sandbox
- License: mit
- Created: 2024-03-02T04:04:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-12T19:52:57.000Z (over 1 year ago)
- Last Synced: 2025-06-05T18:53:23.907Z (5 months ago)
- Topics: favicons, hook, react, react-hook, typescript
- Language: TypeScript
- Homepage:
- Size: 688 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-use-favicon
✨ React hook to dynamically update your page’s favicon.
## Usage
### Install
Install the `@williamgrosset/react-use-favicon` package:
```bash
npm install @williamgrosset/react-use-favicon
```
### Import
Import the `useFavicon` hook:
```tsx
import React from 'react'
import useFavicon from '@williamgrosset/react-use-favicon'
export default function App() {
const { url, update, restore } = useFavicon()
return (
{url && 
}
update('/favicon.ico')}>Update
Restore
)
}
```
### API
`useFavicon` hook returns:
| Prop | Type | Default | Description |
| --------- | ----------------------- | ------- | ------------------- |
| `url` | `string` | `''` | Current favicon URL |
| `update` | `(src: string) => void` | - | Update the favicon |
| `restore` | `() => void` | - | Restore the favicon |
### Parameters
`useFavicon` hook options:
| Prop | Type | Default | Description |
| ----------- | -------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `selectors` | `string` | `"link[rel*='icon']"` | [Valid CSS selector(s)](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) |
## Development
### Local
```
pnpm install
pnpm build
```
### Tests
```
pnpm test
```
### Demo
Within `demo` directory:
```
pnpm install
pnpm start
```
## License
MIT