Adding New Widgets

Embryo-ReactJS provides you the ability to add new 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 "Blog Section" on the "Home Page Two" but you can add any widget on any of the pages in the template:

Step 1: Go to src->routes->home-two & open the index.js file and add the widget in the file like below. You can also add some styling to it, for this you can take the reference from other pages.

{/ blog grid section start /}
                     < div className="section-pad pt-0" >
                        <div className="container">
                           // Add some basic styling here
                           <BlogGrid /> // Added Blog Grid Widget
                        </div>
                     </div >

and import the widget at the top of the file like other import statements:

import BlogGrid from '../../components/widgets/BlogGrid3';

Step 2: Now you have to define a new state. This state is used to pass the data to the grid.

constructor(props) {
      super(props);
      this.state = {
        ...
         blogs: null // New State Defined
      }
   }

Step 3: Now you have to create a function to fetch the data from your database (in our case we are fetching the data from firebase) and pass it to the state defined in above step.

 //get blogs data
   getblogs() {
      const blogsRef = firebase.database().ref('blogs');
      blogsRef.on('value', (snapshot) => {
         let blogs = snapshot.val();
         this.setState({
            blogs: blogs // Set the state
         });
      });
   }

We need to import the firebase in our case.

// firebase
import firebase from '../../firebase';
import 'firebase/database';

Step 4: Call this function in the componentDidMount() method.

componentDidMount() {
     ...
      this.getblogs();
   }

Step 5: You have to conditionalise the return statement so that it will only return when your state have some data to show on the blog grid.

return (
         <Fragment>
            {
               ... && this.state.blogs !== null ?
                  <div className="iron-home-v2-wrap">
                     ...
                     <BlogGrid blogItems={this.state.blogs} />

Once you have completed the above steps, you can now check the newly added widget on your Home Two Page like below:

Last updated