Easily update your Web App's manifest file with react-manifest npm library
Tags: javascript, programming, react, npm
Published: 2023-01-26 17:34:19

> 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

```bash
  npm install react-manifest
```

with yarn

```bash
  yarn add react-manifest
```

## Step 2
Import the package in your React component

```javascript
  import reactManifest from "react-manifest"
```
or

```javascript
  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"

```html
  <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:

```javascript
  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.

```javascript
  reactManifest.update(manifestDetails, "#manifest-placeholder")
```

## Final ReactJs Code

```javascript
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

```html
  <!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.