Radio

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

You can customization Radio component with the Props

Usage#

import React, {FC, useState} from 'react';
import {Body,Radio} 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] = useState([]);

  return (
    <Body paddingAll={20} V_Aligin_center>
      <Radio
         data={DATA}
         selectedValue={selectedValue}
         onChangeValue={setSelectedValue}
      />
    </Body>
  );
};

Reference#

Props#

data#

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

selectedValue#

selectedValue props is used to checked the radio and its type Array of object

onChangeValue#

onChangeValue props is used to change the selected value of the radio and its type Function

buttonColor#

props for changing button color of the radio and type string

import React, {FC, useState} from 'react';
import {Body,Radio} 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] = useState([]);

  return (
    <Body paddingAll={20} V_Aligin_center>
      <Radio
         data={DATA}
         selectedValue={selectedValue}
         onChangeValue={setSelectedValue}
          buttonColor="red"
      />
    </Body>
  );
};

fontSize#

props for changing font size of the label and type number

fontColor#

props for changing font color of the label and type string

fontWeight#

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

inlineStyle#

props give addition props to the Button element type Object