React-manifest NPM

React-Manifest is a simple library that allows you to easily update your manifest.json file in your React application. It allows you to specify the details of your application such as the name, icons, and related applications.

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"

  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>

💖✨

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.

@infinitebrahmanuniverse/nolb-react-ma @everything-registry/sub-chunk-2566

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago