Open In App

How to Create List Styling in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

React, a declarative, efficient, and flexible JavaScript library for building user interfaces, plays a crucial role as the ‘V’ in MVC. Specifically, ReactJS, an open-source, component-based front-end library maintained by Facebook, focuses on the view layer of applications. In this article, we will delve into the intricacies of list styling in React.

Prerequisites:

React Unordered-List:

The list items are marked with bullets/disc/circle etc

Syntax:

<ul>
<li> list of items </li>
</ul>

List Style Types:

  • no-bullet: It is used to set a no-bullet list which is by default enabled.
  • disc: It is used to set a filled circle for the list marker.
  • circle: It is used to set a circle for the list marker.
  • square: It is used to set a square for the list marker.

React Ordered-List:

The list items are marked with numbers/alphabets/roman

Syntax:

<ol>
<li> list of items </li>
</ol>

List Style Types:

  • no-bullet: It is used to set a no-bullet list which is by default enabled.
  • decimal: It is used to set a list with decimal numbers i.e 1,2,3
  • lower-alpha: It is used to set a list with a,b,c,d, etc.
  • lower-latin: It is used to set a list with a,b,c,d, etc.
  • lower-roman: It is used to set a list with i, ii, iii, iv, etc.
  • upper-alpha: It is used to set a list with A, B, C, D, etc.
  • upper-latin: It is used to set a list with A, B, C, D, etc.
  • upper-roman: It is used to set a list with I, II, III, IV, etc.

Steps to Create the React Application And Installing Module:

Step 1: Create a react application using the following command  

npx create-react-app foldername

Step 2: Once it is done change your directory to the newly created application using the following command  

cd foldername

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

Example 1: In this example, we will make an ordered list of fruits in react using a few styles. 

Javascript




import React from 'react';
 
export default function App() {
    return (
        <div className="App">
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>Ordered-Lists in React</h3>
 
            <div style={{ display: 'inline', float: 'left' }}>
                <h5 style={{ color: 'red' }}>No Bullet</h5>
                <ol style={{ listStyle: 'none' }}>
                    <li>Apple</li>
                    <li>Orange</li>
                    <li>Guava</li>
                </ol>
                <h5 style={{ color: 'red' }}>List-Decimal</h5>
                <ol style={{ listStyleType: 'decimal' }}>
                    <li>Banana</li>
                    <li>Pineapple</li>
                    <li>Cherry</li>
                </ol>
                <h5 style={{ color: 'red' }}>List-Lower-Alpha</h5>
                <ol style={{ listStyleType: 'lower-alpha' }}>
                    <li>Strawberry</li>
                    <li>Grapes</li>
                    <li>Melon</li>
                </ol>
                <h5 style={{ color: 'red' }}>List-Lower-Latin</h5>
                <ol style={{ listStyleType: 'lower-latin' }}>
                    <li>Water-melon</li>
                    <li>Litchi</li>
                    <li>Kiwi</li>
                </ol>
            </div>
            <div style={{ display: 'inline', marginRight: '50px' }}>
                <h5 style={{ color: 'red' }}>List-Lower-Roman</h5>
                <ol type="lower-roman" style={{ listStyleType: 'lower-roman' }}>
                    <li>Dragon-Fruit</li>
                    <li>Mango</li>
                    <li>Apricots</li>
                </ol>
                <h5 style={{ color: 'red' }}>List-Upper-Alpha</h5>
                <ol style={{ listStyleType: 'upper-alpha' }}>
                    <li>Avocadoes</li>
                    <li>Lemon</li>
                    <li>Pear</li>
 
                </ol>
                <h5 style={{ color: 'red' }}>List-Upper-Latin</h5>
                <ol style={{ listStyleType: 'upper-latin' }}>
                    <li>Mandarins</li>
                    <li>Dates</li>
                    <li>Raspberry</li>
                </ol>
                <h5 style={{ color: 'red' }}>List-Upper-Roman</h5>
                <ol style={{ listStyleType: 'upper-roman' }}>
                    <li>Gooseberry</li>
                    <li>Bore</li>
                    <li>Peaches</li>
                </ol>
            </div>
 
        </div>
    );
}


Output:

orderedlist

ordered list example

Example 2: In this example, we will make an un-ordered list of fruits in react using a few styles.

Javascript




import React from 'react';
 
export default function App() {
    return (
        <div className="App">
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>UnOrdered-Lists in React</h3>
 
            <div style={{ display: 'inline', float: 'left'}}>
                <h5 style={{ color: 'red' }}>No Bullet</h5>
                <ul style={{ listStyle: 'none' }}>
                    <li>Apple</li>
                    <li>Orange</li>
                    <li>Guava</li>
                </ul>
                <h5 style={{ color: 'red' }}>List-Disc</h5>
                <ul style={{ listStyleType: 'disc' }}>
                    <li>Banana</li>
                    <li>Pineapple</li>
                    <li>Cherry</li>
                </ul>
                <h5 style={{ color: 'red' }}>List-Circle</h5>
                <ul style={{ listStyleType: 'circle' }}>
                    <li>Strawberry</li>
                    <li>Grapes</li>
                    <li>Melon</li>
                </ul>
                <h5 style={{ color: 'red' }}>List-Square</h5>
                <ul style={{ listStyleType: 'square' }}>
                    <li>Water-melon</li>
                    <li>Litchi</li>
                    <li>Kiwi</li>
                </ul>
            </div>
             
        </div>
    );
}


Output:



Last Updated : 04 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads