Github : https://github.com/arshad-yaseen/react-manifest
NPM : https://www.npmjs.com/package/react-manifest
Learn how to use the React-Manifest library to easily update your web app's manifest.json file with new icons, names, and other details. Step-by-step instructions and code examples are provided to help you get started and make the most of this powerful tool.
Installation
with npm
npm install react-manifest
with yarn
yarn add react-manifest
Step 2
Import the package in your React component
import reactManifest from "react-manifest"
or
const reactManifest = require("react-manifest")
Step 3
Add a <link> tag in your index.html file with the id attribute set to "manifest-placeholder" and href attribute set to "./manifest.json"
<link rel="manifest" id="manifest-placeholder" href="./manifest.json" />
Step 4
In your React component, create an object with the details you want to update in your manifest.json file. For example:
const manifestDetails = {
"name": "My Web App",
"short_name": "My App",
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#000000",
"background_color": "#ffffff",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192"
},
{
"src": "icon-512x512.png",
"sizes": "512x512"
}
],
// And More...
}
Step 5
Use the update method to update your manifest.json file by passing in the manifest details and the id of the <link> tag in your index.html file.
reactManifest.update(manifestDetails, "#manifest-placeholder")
Final ReactJs Code
import React, { useEffect } from 'react';
import reactManifest from 'react-manifest';
const MyComponent = () => {
useEffect(() => {
const manifestDetails = {
"name": "My Web App",
"short_name": "My App",
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#000000",
"background_color": "#ffffff",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192"
},
{
"src": "icon-512x512.png",
"sizes": "512x512"
}
],
And More...
};
reactManifest.update(manifestDetails, "#manifest-placeholder");
}, []);
return (
<div>
...
</div>
);
};
export default MyComponent;
Final HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Web App</title>
<link rel="manifest" id="manifest-placeholder" href="./manifest.json" />
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
Top comments (0)