https://github.com/arshad-yaseen/react-manifest

This npm library allows for dynamic manipulation of the manifest.json file in a Reactjs.
https://github.com/arshad-yaseen/react-manifest

manifest manifest-json npm npm-package npmjs react reactjs

Last synced: 3 months ago
JSON representation

This npm library allows for dynamic manipulation of the manifest.json file in a Reactjs.

• Host: GitHub
• URL: https://github.com/arshad-yaseen/react-manifest
• Owner: arshad-yaseen
• License: mit
• Created: 2023-01-26T13:01:45.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-20T18:22:47.000Z (10 months ago)
• Last Synced: 2024-10-05T19:05:33.636Z (3 months ago)
• Topics: manifest, manifest-json, npm, npm-package, npmjs, react, reactjs
• Language: JavaScript
• Homepage: https://npmjs.com/package/react-manifest
• Size: 13.7 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/arshad-yaseen/react-manifest/blob/main/LICENCE) 

 

 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

```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 `` tag in your index.html file with the `id` attribute set to "manifest-placeholder" and `href` attribute set to "./manifest.json"

```html

  

```

## 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 `` 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 (

    


        ...

    


  );

};

export default MyComponent;

```

## Final HTML Code

```html

  

  

    My Web App

    

  

  

    


    

  


```

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.