Generating list of links in React

Posted on Jul 06, 2017

Generating list of links in React

We are generating a list with the help of react-menu-generator.

What is React-menu-generator?

React Menu Generator is very easy and convenient way to create a listing of links in our Webpage dynamically with the help of JSON while creating web pages with React.

We can create nested links by inserting nested JSON’s.

After using react-menu-generator, you don’t have to insert each tag individually again and again,

Just insert data in a JSON and pass it react-menu-generator, It will do the rest of the work for you.

You know what’s the best part of react-menu-generator, if you don’t want to insert class of each tag individually, you can define a global ulClass and liClass, or if you want to add multiple classes, It allows you to do that as well, just define the global class and mention the class in JSON as well. It will add both the classes in your link tag.

How react-menu-generator works?

Let’s understand how react-menu-generator works by an example i have used it for myself in my project.

Step 1: Quickly install the package in our Meteor app:
meteor add nodexpert:react-menu-generator
Step 2: Import the package in our file:
import MenuGenerator from 'meteor/nodexpert:react-menu-generator';
Step 3: Let’s include the MenuGenerator component and pass the JSON and global values of classes.
<MenuGenerator
        ulClass='First'
           liClass='Second'
                  arrData={this.state.arrData}

/>
Step 4: Let’s get to our page to see what happened.

<div id="render-list"><div data-reactroot="" id="root"><ul class="hello"><li class="hie style"><a href="#a-link">Label of Item</a></li><li class="hie"><span>Second Item</span><ul class="hello"><li class="hie"><a href="#another-link">Sub Menu of Second Item</a></li></ul></li></ul></div></div>

Great, we got our list ready, but wait let’s just see what data we passed to create this list.

arrData = [{
  icon: 'icon-class-name',
  class: 'style',
  label: 'Label of Item',
  link: '#a-link',
}, {
  icon: 'icon-class-name',
  label: 'Second Item',
  content: [{
    icon: 'icon-class-name',
    label: 'Sub Menu of Second Item',
    link: '#another-link',
  }, ],
}, ];

Simple isn’t it. We got our list of links.

Are you thinking of nested list with react-menu-generator?

If Yes, it’s possible to have nested list with react-menu-generator. Just pass a list of nested JSON and it will handle all the data and create the list for you.

Go-through Links:

Atmosphere: https://atmospherejs.com/nodexpert/react-menu-generator

Github: https://github.com/nodexpertsdev/react-menu-generator/

If you have any queries, comment below or if you have any suggestions for adding more functionality in the package, also comment below.

Thanks for reading the blog till the END.