https://github.com/afroborg/strapi-plugin-custom-dashboard

https://github.com/afroborg/strapi-plugin-custom-dashboard

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/afroborg/strapi-plugin-custom-dashboard
• Owner: afroborg
• Created: 2023-08-02T11:49:23.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-02T13:56:26.000Z (almost 3 years ago)
• Last Synced: 2025-02-04T13:23:05.944Z (over 1 year ago)
• Language: TypeScript
• Size: 166 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Custom Dashboard

This plugin adds an injection zone to the homepage of your Strapi admin panel (`/admin`.)

It enables injection of your own custom Component instead of the default.

## Installation

```bash

# with npm

npm i strapi-plugin-custom-dashboard

# or yarn

yarn add strapi-plugin-custom-dashboard

```

## Usage

This plugin by itself only removes the default dashboard and adds an injection zone. You'll have to create your own plugin to inject into the zone.

### Creating a plugin

```bash

# with npm

npm run strapi generate

# or yarn

yarn strapi generate

```

Then select `plugin` and give it a name. For this example we'll use `dashboard`.

> **Note**: if you select to use typescript, remember to cd into your plugin folder and run `yarn build` or `npm run build` before starting your strapi server.

### Registering the plugins

Open `./config/plugins.js` and add the following:

```js

module.exports = ({ env }) => ({

  // ...

  'custom-dashboard': {

    enabled: true,

  },

  // name of your own plugin

  'dashboard': {

    enabled: true,

    resolve: './src/plugins/dashboard' // replace dashboard with your plugin name

  },

  // ...

});

```

### Inject Component

In your own plugin, open the `./admin/src/index.[js|ts|jsx|tsx]` file and add the following:

```js

module.exports = {

    // ...

    bootstrap(app) {

        app.getPlugin("custom-dashboard").injectComponent("dashboard", "content", {

        name: "any-name",

        Component: Component, // the base component to inject

        });

  },

}

```