ListText

A basic ListText component that should render nicely on any platform. Supports a good level of customization.

You can customization ListText component with the Props

Usage#

import React, {FC, useState} from 'react';
import {Body,ListText} from 'qdmrncomponents';

const App: FC = () => {

     const DATA = [
    {
        name:'Cricket',
        value:'cricket'
    },
    { 
        name:"FootBall",
        value:'football'
    },
    {
        name:'BatMinton',
        value:'batminton'
    },
  ];

  return (
    <Body paddingAll={20} V_Aligin_center>
      <ListText
        data={DATA}
      />
    </Body>
  );
};

Reference#

Props#

data#

data props of the Listtext Component used to list the data and its type Array of object>

type#

type props is used to sets the list item marker to a bullet and its type 'numbered' | 'bullet' | square

import React, {FC, useState} from 'react';
import {Body,ListText} from 'qdmrncomponents';

const App: FC = () => {

     const DATA = [
    {
        name:'Cricket',
        value:'cricket'
    },
    { 
        name:"FootBall",
        value:'football'
    },
    {
        name:'BatMinton',
        value:'batminton'
    },
  ];

  return (
    <Body paddingAll={20} V_Aligin_center>
      <ListText
        data={DATA}
        type="bullet"
      />
    </Body>
  );
};

bulletSize#

bulletSize props is used to change the size of the bullet or square size and its type number

bulletColor#

props for changing bullet or square color and type string

ListItemFontSize#

props for changing font size of the list text and type number

listItemFontColor#

props for changing font color of the list text and type string

listItemFontWeight#

props for changing font weight of the list text and type string-'bold'

bottomSpace#

props for providing padding bottom to the list and type number

inlineStyle#

props give addition props to the Button element type Object