Top

Component


Basic UI Elements

import { Button } from "reactstrap";

<Button color="primary">Primary Button</Button>
<Button color="secondary">Secondary Button</Button>
<Button color="success">Success Button</Button>
<Button color="info">Info Button</Button>
<Button color="warning">Warning Button</Button>
<Button color="danger">Danger Button</Button>
<Button color="light">Light Button</Button>
PrimarySecondarySuccessInfoWarningDangerLightDark
import { Badge } from "reactstrap";

<Badge color="primary">Primary</Badge>
<Badge color="secondary">Secondary</Badge>
<Badge color="success">Success</Badge>
<Badge color="info">Info</Badge>
<Badge color="warning text-dark">Warning</Badge>
<Badge color="danger">Danger</Badge>
<Badge color="light text-dark">Light</Badge>
<Badge color="dark tag-pills-sm-mb">Dark</Badge>
import { Progress } from 'reactstrap'

<Progress value={0}/>
<Progress color="primary" value={25}/>
<Progress color="secondary" value={50}/>
<Progress color="success" value={75}/>
<Progress color="info" value={100}/>
import { Alert } from 'reactstrap'
                                  
<Alert color="primary">This is a primary alert—check it out!</Alert>
<Alert color="secondary">This is a secondary alert—check it out!</Alert>
<Alert color="success">This is a success alert—check it out!</Alert>
<Alert color="info">This is a info alert—check it out!</Alert>
<Alert color="warning">This is a warning alert—check it out!</Alert>
<Alert color="danger">This is a danger alert—check it out!</Alert>
<Alert color="light">This is a light alert—check it out!</Alert>
<Alert color="dark">This is a dark alert—check it out!</Alert>
                                                      
Dismissible popover
import { Button, Popover, PopoverBody, PopoverHeader } from "reactstrap";

const [basicPopover, setBasicPopover] = useState(false);
const basicToggle = () => setBasicPopover(!basicPopover);

<Button id="Popover-1" color="primary" className="example-popover mr-1" onClick={basicToggle}>Click to toggle popover</Button>
<Popover placement="left" isOpen={basicToggle} target="Popover-1" toggle={basicToggle}>
    <PopoverHeader> Basic Popover </PopoverHeader>
    <PopoverBody> If the package restore doesn't help, you can look at the Output window in the Visual Studio.</PopoverBody>
</Popover>
import { Button, Tooltip } from 'reactstrap'

const [basictooltip, setbasictooltip] = useState(false);
const toggle = () => setbasictooltip(!basictooltip);

<Button color="primary" className="example-popover" id="Tooltip-1">Hover Me</Button>
<Tooltip target="Tooltip-1" placement="top" isOpen={basictooltip} toggle={toggle}>tooltip</Tooltip>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

import { Nav, NavItem, NavLink, TabContent, TabPane } from "reactstrap";
const [basicTab, setBasicTab] = useState("1");
                    
<Nav tabs>
    <NavItem>
    <NavLink className={`txt-primary ${basicTab === "1" ? "active" : ""}`} onClick={() => setBasicTab("1")}>Home</NavLink>
    </NavItem>
    <NavItem>
    <NavLink className={`txt-primary ${basicTab === "2" ? "active" : ""}`} onClick={() => setBasicTab("2")}>Profile</NavLink>
    </NavItem>
    <NavItem>
    <NavLink className={`txt-primary ${basicTab === "3" ? "active" : ""}`} onClick={() => setBasicTab("3")}>Contact</NavLink>
    </NavItem>
</Nav>
<TabContent activeTab={basicTab}>
    <TabPane tabId="1">
    <P>Home</P>
    <TabPane/>
    <TabPane tabId="2">
    <P>Profile</P>
    <TabPane/>
    <TabPane tabId="3">
    <P>Contact</P>
    <TabPane/>
</TabContent>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "reactstrap";

const [open, setOpen] = useState("1");
const toggle = (id: string) => (open === id ? setOpen('') : setOpen(id));

<Accordion open={open} toggle={toggle} class="default-according">
    <AccordionItem>
    <AccordionHeader>
        <span className="text-primary">Accordian Item-1
        <ChevronDown className="svg-color text-primary"/>       
        </span>      
    </AccordionHeader>
    <AccordionBody accordionId="1">
        <P>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</P>      
    </AccordionBody>
    </AccordionItem>
    <AccordionItem>
    <AccordionHeader>
    <span className="text-primary">Accordian Item-2
        <ChevronDown className="svg-color text-primary"/>       
    </span>      
    </AccordionHeader>
    <AccordionBody accordionId="2">
    <P>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</P>      
    </AccordionBody>
    </AccordionItem>
    <AccordionItem>
    <AccordionHeader>
    <span className="text-primary">Accordian Item-3
        <ChevronDown className="svg-color text-primary"/>       
    </span>      
    </AccordionHeader>
    <AccordionBody accordionId="3">
    <P>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</P>      
    </AccordionBody>
    </AccordionItem>
</Accordion>

Advance UI Element


npm i react-custom-scrollbars-2

<
import Scrollbars from "react-custom-scrollbars-2";

const CustomScrollbar = () => {
return (
    <Card>
        <CardBody>
        <Scrollbars style={{ width: "100%", height: "300px" }} className="scroll-demo">
            <h5>Custom Scrollbar</h5>
            <p>Custom Scrollbar</p>
        </Scrollbars>
        </CardBody>
    </Card>
)}

Remove package from project

npm remove react-custom-scrollbars-2

npm i react-accessible-treeview

import TreeView, { flattenTree } from "react-accessible-treeview";
import { IoMdArrowDropright } from "react-icons/io";
import { FaSquare, FaCheckSquare, FaMinusSquare } from "react-icons/fa";

export const ArrowIcon = ({ isOpen, className }: ArrowIconProps) => {
  const baseClass = "arrow";
  const classes = cx(baseClass, { [`${baseClass}--closed`]: !isOpen }, { [`${baseClass}--open`]: isOpen }, className);
  return <IoMdArrowDropright className={classes} />;
};

export const CheckBoxIcon = ({ variant, onClick, ...rest }: CheckBoxIconProps) => {
  switch (variant) {
    case "all": return (<span onClick={onClick}> <FaCheckSquare {...rest} /> </span>);
    case "none": return (<span onClick={onClick}> <FaSquare {...rest} /> </span>);
    case "some": return (<span onClick={onClick}> <FaMinusSquare {...rest} /> </span>);
    default: return null;
  }
};

const BasicTrees = () => {
  const treeData = flattenTree(<!-- Your JSON Data -->);

 return (
   <Card>
    <CardBody>
     <TreeView data={treeData} aria-label="Checkbox tree" multiSelect propagateSelect propagateSelectUpwards togglableSelect expandedIds={[1,2,6,10]} 
nodeRenderer={({ element, isBranch, isExpanded, isSelected, isHalfSelected, getNodeProps, level, handleSelect, handleExpand }) => { return ( <div {...getNodeProps({ onClick: handleExpand })} style={{ marginLeft: 40 * (level - 1),marginTop:5 }} className="d-flex align-items-center"> {isBranch && <ArrowIcon isOpen={isExpanded} />} <CheckBoxIcon className="checkbox-icon" onClick={(e) => { handleSelect(e); e.stopPropagation(); }} variant={isHalfSelected ? "some" : isSelected ? "all" : "none"} />
<span className="name">{element.name}</span></div> ); }}/> </CardBody> </Card> )}

Remove package from project

npm remove react-accessible-treeview

import { Toast, ToastBody,ToastHeader } from "reactstrap";

const TopRightToast = () => {
  const [open, setOpen] = useState(false);
  const toggle = () => {
    setOpen(true);
    setTimeout(() => {
      setOpen(false);
    }, 3000);
  };

  return (
    <>
       <Button color="primary" onClick={toggle}>{TopRightToasts}</Button>
       <div className="toast-container position-fixed top-0 end-0 p-3 toast-index toast-rtl">
         <Toast fade isOpen={open}>
           <ToastHeader className="toast-img" toggle={toggle}>
             <strong className="me-auto">Dunzo theme</strong>
             <small>5 min ago</small>
           </ToastHeader>
           <ToastBody className="toast-dark">Hello, I'm a web-designer.</ToastBody>
         </Toast>
       </div>
     </>
 )}


npm i react-rating

import Rating from 'react-rating';

const OneToTenRatingBar = () => {
  const [rating, setRating] = useState(7);
  const handleRatingChange = (newRating: number) => {
        setRating(newRating);
  };

 return (
   <Card>
    <CardBody>
     <div className="rating-container">
        <Rating start={0} stop={10} initialRating={rating} onChange={handleRatingChange} />
        <p className="current-rating">Selected Rating: {rating}</P>
     </Scrollbars>
    </CardBody>
  </Card>
)}

Remove package from project

npm remove react-rating

npm i react-dropzone-uploader

<!-- Dropzone css -->
import 'react-dropzone-uploader/dist/styles.css'

import Dropzone from 'react-dropzone-uploader';

const SingleFileupload = () => {
const getUploadParams = () => {
return { url: 'https://httpbin.org/post' };
}

return (
    <Card>
    <CardBody className="mt-3 mb-3">
        <Dropzone getUploadParams={getUploadParams} maxFiles={1}
        inputContent={
            <div className='dz-message needsclick'>
                <FiUploadCloud />
                <h4>{"Drop files here or click to upload."}</h4>
                <span className='note needsclick'>
                    {'(This is just a demo dropzone. Selected files are '}<strong>{'not'}</strong>{' actually uploaded.)'}
                </span>
            </div>
        }
        />
    </CardBody>
    </Card>
);
};

export default SingleFileupload;

Remove package from project

npm remove react-dropzone-uploader

npm i @reactour/tour

import { TourProvider, useTour } from "@reactour/tour";

const STEPS = [
  {
    selector: ".step1",
    content: "This is Dunzo profile",
  },
];                

const TourContainer = () => {
  const { setIsOpen } = useTour();
  useEffect(() => {
    var timer = setTimeout(() => {
      setIsOpen(true);
    }, 3000);
    return () => {
      clearTimeout(timer);
    };
  }, [setIsOpen]);

  return (
    <TourProvider steps={STEPS} showPrevNextButtons={true} showCloseButton={true} disableInteraction={false} disableKeyboardNavigation={false}>
    <Card className="hovercard text-center">
      <div className="cardheader"></div>
      <div className="user-image">
        <div className="icon-wrapper">
          <i className="icofont icofont-pencil-alt-5 step1"></i>
        </div>
      </div>
    </Card>
    </TourProvider>
  );
};
              

Remove package from project

npm remove @reactour/tour

npm i sweetalert2

import SweetAlert from "sweetalert2";
    
const BasicExample = () => {
    const displayAlert = () => {
        SweetAlert.fire("Welcome! to the Yuri theme");
    };
    
    return (
    <Card className="height-equal">
        <CardBody className="btn-showcase">
        <Button color="primary" className="sweet-1" onClick={displayAlert}>{ClickIt}</Button>
        </CardBody>
    </Card>
    );
};
                                      

Remove package from project

npm remove sweetalert2

npm i react-range

import { Range, getTrackBackground } from "react-range";
                                      
export const DefaultRangeSliderForm = () => {
const [values, setValues] = useState([10]);

return (
<Form className="theme-form range-slider">
<FormGroup>
    <Row className="py-1">
    <Col md="12">
        <div className="range-container">
        <Range values={values} step={1} min={100} max={1000} onChange={(values) => setValues(values)} renderTrack={({ props, children }) => (
            <div onMouseDown={props.onMouseDown} onTouchStart={props.onTouchStart} className="range-track">
                <output className="range-output">0</output>
                <div ref={props.ref} className="range-track-bar" style={{ background: getTrackBackground({ values: values, colors: ["#33BFBF", "#ccc"], min: 100, max: 1000 })}}>
                {children}
                </div>
                <output className="range-output">20</output>
            </div>
            )}
            renderThumb={({ props.isDragged }) => (
            <div {...props} className="range-thumb">
                <div className={`range-thumb-bar ${isDragged ? 'range-thumb-bar-dragged' : ''}`} />
            </div>
            )}
        />
        <output id="output" className="range-output">{values[0]}</output>
        </div>
    </Col>
    </Row>
</FormGroup>
</Form>
);
};
                                      

Remove package from project

npm remove react-range

npm i react-image-crop

<!--Image cropper css-->
import 'react-image-crop/dist/ReactCrop.css';

import ReactCrop, { centerCrop, makeAspectCrop, Crop, PixelCrop } from "react-image-crop";

export default function ImageCropperBody() {
const [imgSrc, setImgSrc] = useState("");
const previewCanvasRef = useRef<HTMLCanvasElement>(null);
const imgRef = useRef<HTMLImageElement>(null);
const [crop, setCrop] = useState<Crop>();
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
const [scale, setScale] = useState(1);
const [rotate, setRotate] = useState(0);
const [aspect, setAspect] = useState<number | undefined>(16 / 9);

const onSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
    setCrop(undefined); // Makes crop preview update between images.
    const reader = new FileReader();
    reader.addEventListener("load", () => setImgSrc(reader.result?.toString() || ""));
    reader.readAsDataURL(e.target.files[0]);
    }
};

const centerAspectCrop = (mediaWidth: number, mediaHeight: number, aspect: number) => {
    return centerCrop(makeAspectCrop({ unit: "%", width: 90 }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
};

const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
    if (aspect) {
    const { width, height } = e.currentTarget;
    setCrop(centerAspectCrop(width, height, aspect));
    }
};

useDebounceEffect( async () => {
    if (completedCrop?.width && completedCrop?.height && imgRef.current && previewCanvasRef.current)
        // We use canvasPreview as it's much faster than imgPreview.
        canvasPreview(imgRef.current, previewCanvasRef.current, completedCrop, scale, rotate);
    },
    100, [completedCrop, scale, rotate]
);

return (
    <div>
    <Input type="file" accept="image/*" onChange={onSelectFile} />
    <Label htmlFor="scale-input">{'Scale: '}</Label>
    <Input
        id="scale-input"
        type="number"
        step="0.1"
        value={scale}
        disabled={!imageSrc}
        onChange={(e) => setScale(Number(e.target.value))}
    />
    <Label htmlFor="rotate-input">{'Rotate: '}</Label>
    <Input
        id="rotate-input"
        type="number"
        value={rotate}
        disabled={!imageSrc}
        onChange={(e) =>
            setRotate(Math.min(180, Math.max(-180, Number(e.target.value))))
        }
    />
    {!!imageSrc && (
        <ReactCrop crop={crop} onChange={(_, percentCrop) => setCrop(percentCrop)} onComplete={(c) => setCompletedCrop(c)} aspect={aspect}>
            <img ref={imageRef} alt="Crop me" src={imageSrc} onLoad={onImageLoad} className="crop-image" />
        </ReactCrop>
    )}
    <div>
        {!!completedCrop && (
            <canvas
                ref={previewCanvasRef}
                className="preview-canvas"
                style={{ width: completedCrop.width, height: completedCrop.height, }}
            />
        )}
    </div>
</div>
);
};
                

Remove package from project

npm remove react-image-crop

npm i react-vertical-timeline-component

import { VerticalTimeline } from "react-vertical-timeline-component";

const Timelines = () => {
  return (
    <Card>
      <CardBody>
        <VerticalTimeline animate>
         <VerticalTimelineElement className='vertical-timeline-element--work' date='February 02 2022' icon={<i className="icon-pencil-alt"></i>} iconClassName='cd-timeline-img bg-primary'>
           <div className='timeline-wrapper'>
             <Badge color='warning'>{AppIdeas}</Badge>
           </div>
           <h5 className='m-0 vertical-timeline-element-subtitle'>{EstablishedNewTheAppIdeaRepository}</h5>
           <p className='mb-0'>{AppIdeaText}</p>
           <div className='time-content pt-2'>
             <i className='icon-github'></i>
             <h6>{ViewItOnGithub}</h6>
           </div>
         </VerticalTimelineElement>
        </VerticalTimeline>
      </CardBody>
    </Card>
  );
};

Remove package from project

npm remove react-vertical-timeline-component

Icons

You have to add the following style and add flag-icon folder in your fonts folder
<!-- flag icon css -->
import "~flag-icons/css/flag-icons.min.css"
                
<!-- some icon display for demo -->
<i className="flag-icon flag-icon-in mx-1"></i>
<i className="flag-icon flag-icon-ad mx-1"></i>
<i className="flag-icon flag-icon-ae mx-1"></i>
<i className="flag-icon flag-icon-af mx-1"></i>
You have to add the following style and add font-awesome folder in your fonts folder
<!-- font awesome css -->
import "font-awesome/scss/font-awesome.scss"
                
<!-- some icon display for demo -->
<i className="fa fa-bluetooth mx-1"></i>
<i className="fa fa-bitcoin mx-1"></i>
<i className="fa fa-anchor mx-1"></i>
<i className="fa fa-text-height mx-1"></i>
You have to add the following style and add ico folder in your fonts folder
<!-- ico icon css -->
import "/public/assets/scss/icoicon/_icons.scss"
    
<!-- some icon display for demo -->
<i className="icofont icofont-bow mx-1"></i>
<i className="icofont icofont-animal-dolphin mx-1"></i>
<i className="icofont icofont-brand-apple mx-1"></i>
<i className="icofont icofont-bank-alt mx-1"></i>
You have to add the following style and add themify folder in your fonts folder
<!-- themify icon css -->
import "./themify.scss";
                
<!-- some icon display for demo -->
<i className="icon-fullscreen mx-1"></i>
<i className="icon-save-alt mx-1"></i>
<i className="icon-volume mx-1"></i>
<i className="icon-instagram mx-1"></i>
You have to add the following style and add feather folder in your fonts folder
npm i react-feather
<!-- some icon display for demo -->
import { Heart, Camera } from "react-feather";

<Heart color="red" size={48}/>
<Camera color="green" size={28}/>
<Search size={38}/>

Remove package from project

npm remove react-feather

Cards

Basic Card

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.

import { Card, CardHeader, CardBody } from "reactstrap"
                  
<Card>
    <CardHeader>
        <h5>Basic Card</h5>
    </CardHeader>
    <CardBody>
        <p className="mb-0"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. </p>
    </CardBody>
</Card>
Basic Card

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.

import { Card, CardHeader, CardBody } from "reactstrap"
                  
<Card>
  <CardHeader class="b-l-primary">
    <h5>Basic Card</h5>
  </CardHeader>
  <CardBody>
    <p class="mb-0"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. </p>
  </CardBody>
</Card>

Charts

npm i react-google-charts
import { Chart } from "react-google-charts";

const BAR_ONE_CHART_DATA = [
[
"Element",
"Density",
{
role: "style",
},
{
sourceColumn: 0,
role: "annotation",
type: "string",
calc: "stringify",
},
],
["Copper", 10, "#a927f9", 10],
["Silver", 12, "#f8d62b", 12],
["Gold", 14, "#f73164", 14],
["Platinum", 16, "color: #7366ff", 14],
];

const BAR_ONE_CHART_OPTION: any = {
title: "Density of Precious Metals, in g/cm^3",
width: "100%",
height: 400,
bar: {
groupWidth: "95%",
},
legend: {
position: "none",
},
};

const BarChart = () => {
return (
<Card>
<CardBody className="chart-block">
<div className="chart-overflow" id="bar-chart2">
<Chart chartType="BarChart" width="100%" height="400px" data={BAR_ONE_CHART_DATA} options={BAR_ONE_CHART_OPTION} />
</div>
</CardBody>
</Card>
);
};

Remove package from project

npm remove react-google-charts

npm i react-chartjs-2
import { Radar } from "react-chartjs-2";

const RADAR_GRAPH_CHART = {
labels: ["Ford", "Chevy", "Toyota", "Honda", "Mazda"],
datasets: [
{
label: "My First Dataset",
data: [12, 3, 5, 18, 7],
fill: true,
backgroundColor: "rgba(115, 102 ,255, 0.4)",
borderColor: primary,
borderWidth: 1,
pointColor: primary,
},
],
options: {
responsive: true,
maintainAspectRatio: false,
elements: {
line: {
borderWidth: 2,
},
},
plugins: {
datalabels: {
display: false,
},
legend: {
display: false,
},
},
},
};

const RadarGraph = () => { 
return (
<Card>
<CardBody className="chart-block">
<Radar id="myRadarGraph" data={RADAR_GRAPH_CHART} options={RADAR_GRAPH_CHART.options} width={778} height={400} />
</CardBody>
</Card>
);
};

Remove package from project

npm remove react-chartjs-2

npm i react-apexcharts
import Chart from 'react-apexcharts';

const BasicAreaChart = () => {

const BASIC_AREA_CHART: ApexOptions = {
chart: {
height: 350,
type: "area",
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
series: [
{
name: "STOCK ABC",
data: series.monthDataSeries1.prices,
},
],
title: {
text: "Fundamental Analysis of Stocks",
align: "left",
},
subtitle: {
text: "Price Movements",
align: "left",
},
labels: series.monthDataSeries1.dates,
xaxis: {
type: "datetime",
},
yaxis: {
opposite: true,
},
legend: {
horizontalAlign: "left",
},
colors: [primary],
};

return (
<Card>
<CardBody>
<div id="basic-apex">
<Chart options={BASIC_AREA_CHART} series={BASIC_AREA_CHART.series} type="area" height={350} />
</div>
</CardBody>
</Card>
);
};

        

Remove package from project

npm remove react-apexcharts

Maps

npm i @react-google-maps/api
import { GoogleMap, useJsApiLoader } from "@react-google-maps/api";

const BasicMap = () => {
const BasicContainerStyle = {
    height: "500px",
};

const BasicCenter = {
    lat: -3.745,
    lng: -38.523,
};

const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: "https://maps.googleapis.com/maps/api/js?key=AIzaSyAjeJEPREBQFvAIqDSZliF0WjQrCld-Mh0",
});

return (
    <Card>
    <CardBody>
        <div className="map-js-height">
        <div id="gmap-simple" className="map-block">
            {isLoaded ? <GoogleMap mapContainerStyle={BasicContainerStyle} center={BasicCenter} zoom={10} /> : "Loading"}
        </div>
        </div>
    </CardBody>
    </Card>
);
};

Remove package from project

npm remove @react-google-maps/api
npm i react-leaflet
import { MapContainer, TileLayer } from "react-leaflet";

const WorldMap = () => {
const USA_POSITION = { lat: 50, lng: 10 };

return (
<Card>
<CardBody>
<MapContainer style={{ height: 389 }} easeLinearity={0.35} attributionControl={true} center={USA_POSITION} zoom={13} scrollWheelZoom={true} className="z-0 jvector-map-height">
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</MapContainer>
</CardBody>
</Card>
);
};

Remove package from project

npm remove react-leaflet

Editors


npm i react-ace
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-java';
import 'ace-builds/src-noconflict/theme-monokai';
import 'ace-builds/src-noconflict/ext-language_tools';

const JavascriptMode = () => {
return (
    <Card>
        <CardBody>
        <AceEditor 
        className="aceEditor w-auto"
        mode='javascript' 
        theme='monokai' 
        value={JAVA_DATA} 
        name='blah2' 
        setOptions={{ useWorker: false }} 
        fontSize={14} 
        showPrintMargin={true} 
        showGutter={true} 
        editorProps={{ $blockScrolling: true }} 
        highlightActiveLine={true} />
        </CardBody>
    </Card>
);
};

Remove package from project

npm remove react-ace

npm i react-quill
import ReactQuill from 'react-quill';

const SnowTheme = () => {
const snowThemeContent: string = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at vulputate urna, sed dignissim arcu. Aliquam at ligula imperdiet, faucibus ante a, interdum enim. Sed in mauris a lectus lobortis condimentum. Sed in nunc magna. Quisque massa urna, cursus vitae commodo eget, rhoncus nec erat. Sed sapien turpis, elementum sit amet elit vitae, elementum gravida eros. In ornare tempus nibh ut lobortis. Nam venenatis justo ex, vitae vulputate neque laoreet a.</p>";
const [value, setValue] = useState(snowThemeContent);

    return (
    <Card>
        <CardBody>
        <ReactQuill theme='snow' value={value} onChange={setValue} />
        </CardBody>
    </Card>
    );
};

Remove package from project

npm remove react-quill