Adding Widgets

Reactify provides you the ability to add widgets in the template. Please check the detailed documentation to learn, how to add the new widgets in the template.

Adding a new widget

Please follow the given steps to add a new widget in the template. We are taking an example of adding a "New Widget" on the "Ecommerce Dashboard" but you can add any widget on any of the dashboard in the template:

Step 1: Please create a new widget file(of extension .js) in the folder src->components->Widgets. Like We have created a file named NewWidget.js in the same folder.

Step 2: Now add the code in the widget file as per your requirements. For Example we have added the simple text block in the widget file as given in the code snippet below:

NewWidget.js

/**
 * new widget
 */
import React, { Component } from 'react';

export default class NewWidget extends Component {
	render() {
		return (
			<div className="new-widget">
				<div className="bg-primary p-50 mb-30">
               <h2 className="text-light">{'This is a new widget'}</h2>
            </div>
			</div>
		)
	}
};

Step 3: Open the index.js file from the src->components->Widgets and import and then export the widget in the export array like given in the code snippet below:

index.js

// Imported New Widget
const NewWidget = Loadable({
   loader: () => import("./NewWidget"),
   loading: MyLoadingComponent
})

export {
   ...
   TwitterFeedsV2,
   // Exported New Widget
   NewWidget
}

Step 4: Open src->routes->dashboard->ecommerce->index.js file and add the NewWidget in the div section <div className="ecom-dashboard-wrapper"> as given in the code and also import the NewWidget at the top like other import statements already imported.

index.js

import React, { Component } from 'react'

// intl messages
import IntlMessages from 'Util/IntlMessages';

// page title bar
import PageTitleBar from 'Components/PageTitleBar/PageTitleBar';

// Newly added widget import statement
import { NewWidget } from 'Components/Widgets';

export default class EcommerceDashboard extends Component {
   render() {
      const { match } = this.props;
      return (
         <div className="ecom-dashboard-wrapper">
            <PageTitleBar title={<IntlMessages id="sidebar.ecommerce" />} match={match} />

            // Newly added widget div section
            <NewWidget />
         </div>
      )
   }
}

Now save the file and open the browser, you will see your newly added widget on your dashboard like below screenshot:

Adding an existing widget

Please follow the given steps to add an existing widget in the template. We are taking an example of adding a "ToDo List" on the "Ecommerce Dashboard" but you can add any widget on any of the dashboard in the template:

Step 1: Open src->routes->dashboard->ecommerce->index.js file and add the TodoListWidget in the div section <div className="ecom-dashboard-wrapper"> as given in the code and also import the TodoListWidget at the top like other import statements already imported.

index.js

/**
 * Ecommerce Dashboard
 */

import React, { Component } from 'react'
import IntlMessages from 'Util/IntlMessages';
import PageTitleBar from 'Components/PageTitleBar/PageTitleBar';

// Newly added widget import statement
import TodoListWidget from 'Components/Widgets';

export default class EcommerceDashboard extends Component {
   render() {
      const { match } = this.props;
      return (
         <div className="ecom-dashboard-wrapper">
            <PageTitleBar title={<IntlMessages id="sidebar.ecommerce" />} match={match} />
            
            // Newly added widget div section
            <TodoListWidget />
            
         </div>
      )
   }
}

Now save the file and open the browser, you will see your newly added widget on your dashboard like below screenshot:

Added Todo List on Ecommerce Dashboard

It does not matters whether you are using the seed project or the complete template, the steps remains the same for both.