react-favicon-notification
v1.0.28
Published
React context to show notification on favicon
Downloads
554
Maintainers
Readme
react-favicon-notification
React context to show notification on favicon
Demo
Installation
npm i react-favicon-notification
Usage
Importing context provider
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import FaviconNotificationContextProvider from "react-favicon-notification";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<FaviconNotificationContextProvider>
<App />
</FaviconNotificationContextProvider>
</React.StrictMode>
);
// Wrap your application in the providers
Use the custom hook to change the favicon notification config
import { useFaviconNotification } from "react-favicon-notification";
const [config, setConfig] = useFaviconNotification();
function showNotificationIcon() {
setConfig({ ...config, show: true }); // set 'show' to true in order to see the notifications
}
function incrementNotification() {
setConfig({ ...config, counter: config.counter + 1 });
}
config properties
| property | default | type | description |
| --------------- | ------------------------------------ | ------------- | :----------------------------------------: |
| counter | 0
| number/string | counter number |
| innerCircle | false
| boolean | hide counter and show a small inner circle |
| backgroundColor | #DB0101
| string | set the background color |
| fontColor | #FFF
| string | set the font color |
| fontFamily | Arial
| string | set the font family |
| fontWeight | bold
| string | set the font weigth |
| url | window.location.origin/favicon.ico
| string | set the url to get the favicon |
| position | bottom-right
| string | set the position of the notification |
| show | false
| boolean | show the notificaion circle |
Warning: Do not forget to set the show property to true in order to show the notification