DropDown

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

You can customization DropDown component with the Props

Usage#

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

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

  const [selectedValue,setSelectedValue] = React.useState([DATA[0]]);

  return (
    <Body paddingAll={20} V_Aligin_center>
      <DropDown
        data={DATA} //list of data
        type="single"//type of the modal
        selectedValue={selectedValue} // selected Data
        onChangeValue={setSelectedValue} // change values
      />
    </Body>
  );
};

Reference#

Props#

here all the list of Props you can use for DropDown Component

data,selectedValue,onChangeValue,type#

this 4 props is must for the dropdown component

data#

send Array of Objects to the data props

selectedValue#

active values are stored in selectedValue props

onChangeValue#

onChangeValue function props used to change selectedValue props

type#

type props denotes single select or multiple select

type - single#

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

const App: FC = () => {
    const DATA = [
      {
          id:'1',
          name:'Cricket',
          value:'cricket'
      },
      { 
          id:'2',
          name:"FootBall",
          value:'football'
      },
      {
          id:'3', 
          name:'BatMinton',
          value:'batminton'
      },
  ];

  const [selectedValue,setSelectedValue] = React.useState([]);

  return (
    <Body paddingAll={20} V_Aligin_center>
      <DropDown
        data={DATA} //list of data
        type="single"//type of the modal
        selectedValue={selectedValue} // selected Data
        onChangeValue={setSelectedValue} // change values
      />
    </Body>
  );
};

type - multiple#

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

const App: FC = () => {
    const DATA = [
      {
          id:'1',
          name:'Cricket',
          value:'cricket'
      },
      { 
          id:'2',
          name:"FootBall",
          value:'football'
      },
      {
          id:'3', 
          name:'BatMinton',
          value:'batminton'
      },
  ];

  const [selectedValue,setSelectedValue] = React.useState([]);

  return (
    <Body paddingAll={20} V_Aligin_center>
      <DropDown
        data={DATA} //list of data
        type="multiple"//type of the modal
        selectedValue={selectedValue} // selected Data
        onChangeValue={setSelectedValue} // change values
      />
    </Body>
  );
};

buttonColor#

buttonColor props used to change button color

borderColor#

borderColor props used to change border color

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

const App: FC = () => {
 
const [selectedValue,setSelectedValue] = React.useState([]);

return (
  <Body paddingAll={20} V_Aligin_center>
    <DropDown
      data={DATA} //list of data
      type="multiple"//type of the modal
      selectedValue={selectedValue} // selected Data
      onChangeValue={setSelectedValue} // change values
      buttonColor="blue"
      borderColor="blue"
    />
  </Body>
);
};