DEV Community

Arshad Yaseen
Arshad Yaseen

Posted on

Easily update your Web App's manifest file with react-manifest npm library

#webdev #cybersecurity #fullstack #networking

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
Enter fullscreen mode Exit fullscreen mode

with yarn

 yarn add react-manifest
Enter fullscreen mode Exit fullscreen mode

Step 2

Import the package in your React component

 import reactManifest from "react-manifest"
Enter fullscreen mode Exit fullscreen mode

or

 const reactManifest = require("react-manifest")
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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... }
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

💖✨

And that's it! You have successfully updated your manifest.json file with the details provided. You can use this package to easily update your manifest.json file and customize your PWA experience.

Top comments (0)