npm i react-form-stepper

'use client';

import { Card, CardBody, CardHeader, Container, Row } from 'reactstrap';
import { Col } from 'react-bootstrap';
import { useState } from 'react';
import { Stepper, Step } from 'react-form-stepper';
import { FormWizardWithIcon } from '@/Constant';
import Registration from '@/Component/FormLayout/FormWizard/Registration';
import Emails from '@/Component/FormLayout/FormWizard/Email';
import Birthdate from '@/Component/FormLayout/FormWizard/Birthdate';

const FormWizardContainer = () => {
  const [goSteps, setGoSteps] = useState(0);
  return (
    <Container fluid={true}>
       <Row>
         <Col sm='12>
           <Card>
             <CardHeader>
               <h5>{FormWizardWithIcon} </h5>
             </CardHeader>
             <CardBody>
               <Stepper activeStep={goSteps}>
                 <Step onClick={() => setGoSteps(0)} label='StepOne' />
                 <Step onClick={() => setGoSteps(1)} label='StepTwo' />
                 <Step onClick={() => setGoSteps(2)} label='StepThree' />
               </Stepper>
              {goSteps === 0 &&  <Registration goSteps={goSteps} setGoSteps={setGoSteps} />}
              {goSteps === 1 &&  <Emails goSteps={goSteps} setGoSteps={setGoSteps} />}
              {goSteps === 2 &&  <Birthdate goSteps={goSteps} setGoSteps={setGoSteps} />}
             </CardBody>
           </Card>
         </Col>
       </Row>
     </Container>
  );
};
export default FormWizardContainer;

npm i react-toastify

import { ToastContainer,toast } from 'react-toastify'
import {Button} from 'reactstrap';

<CardBody className="btn-showcase">
  <Button color="success" onClick={() => toast.success("Success Notification !")}>
  Success Notification
  </>
</CardBody>
<ToastContainer />

npm i @sjmc11/tourguidejs

"use client";
import { TourGuideClient } from "@sjmc11/tourguidejs";
import TourComponents from "../../../../Component/bonus-ui/Tour/TourComponents";
import { stepsData } from "@/Data/BonusUiData/Tour";
import { useEffect, useRef, useState } from "react";
import { toast } from "react-toastify";

const Tour = () => {
  const tourRef = useRef<any | null>(null);
  const [isTourOpen, setIsTourOpen] = useState(false);

  useEffect(() => {
    try {
      tourRef.current = new TourGuideClient({ steps: stepsData });
    } catch (error) {
      toast.error("Error initializing TourGuideClient:" + error);
    }

    return () => tourRef.current?.destroy?.();
  }, []);

  useEffect(() => {
    const timer = setTimeout(() => setIsTourOpen(true), 1000);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    if (isTourOpen) tourRef.current?.start?.();
  }, [isTourOpen]);

  return (
    <>
      <TourComponents />
    </>
  );
};

export default Tour;

npm i react-ratings-declarative

import Rating from 'react-rating'
const [rating,setRating] = useState(5);
}
const Ratingss = (props) => {
  return (
          <Rating
            initialRating={rating}
            emptySymbol="fa fa-star-o fa-2x"
            fullSymbol="fa fa-star fa-2x"
            onChange={(rate) => setRating(rate)} 
          />
  );
}

npm i reactstrap

import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
<Pagination aria-label="Page navigation" className="pagination-primary">
  <PaginationItem>
    <PaginationLink href="#">
      Previous
    </PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">
      1
    </PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">
      2
    </PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">
      3
    </PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">
      Next
    </PaginationLink>
  </PaginationItem>
</Pagination>

npm i react-range

import React from 'react'
import InputRange from 'react-range'
                              
const RangeSlider = () => {
                                
  const STEP = 1;
  const MIN = 0;
  const MAX = 20;
  const [values1, setValues1] = useState([10]);
                              
    return (
      <Range
        values={values1}
        step={STEP}
        min={MIN}
        max={MAX}
        onChange={(values1) => setValues1(values1)}
        renderTrack={({ props, children }) => (
            <div
              onMouseDown={props.onMouseDown}
              onTouchStart={props.onTouchStart}
              style={{
                ...props.style,
                height: "36px",
                display: "flex",
                width: "100%"
              }}
            >
            <output style={{ marginTop: "30px" }}>
                0
                </output>
                <div
                ref={props.ref}
                style={{
                  height: "5px",
                  width: "100%",
                  borderRadius: "4px",
                  background: getTrackBackground({
                    values: values1,
                    colors: ["#7366ff", "#ccc"],
                    min: MIN,
                    max: MAX
                  }),
                  alignSelf: "center"
                }}
                >
                {children}
                </div>
                <output style={{ marginTop: "30px" }}>
                20
                </output>
                </div>
                )}
                renderThumb={({ props, isDragged }) => (
                  <div
                    {...props}
                    style={{
                      ...props.style,
                      height: "42px",
                      width: "42px",
                      borderRadius: "4px",
                      backgroundColor: "#FFF",
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                      boxShadow: "0px 2px 6px #AAA"
                    }}
                    >
                    <div
                      style={{
                        height: "16px",
                        width: "5px",
                        backgroundColor: isDragged ? "#7366ff" : "#CCC"
                      }}
                    />
                  </div>
                 )}
                 />
         )
          }

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";

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

const ImageCropperBody = () => {
  const [imgSrc, setImgSrc] = useState("");
  const previewCanvasRef = useRef<HTMLCanvasElement>(null);
  const imgRef = useRef<HTMLImageElement>(null);
  const hiddenAnchorRef = useRef<HTMLAnchorElement>(null);
  const blobUrlRef = useRef("");
  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 onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
    if (aspect) {
      const { width, height } = e.currentTarget;
      setCrop(centerAspectCrop(width, height, aspect));
    }
  };

  const onDownloadCropClick = () => {
    if (!previewCanvasRef.current) throw new Error("Crop canvas does not exist");
    previewCanvasRef.current.toBlob((blob) => {
      if (!blob) throw new Error("Failed to create blob");
      if (blobUrlRef.current) URL.revokeObjectURL(blobUrlRef.current);
      blobUrlRef.current = URL.createObjectURL(blob);
      hiddenAnchorRef.current!.href = blobUrlRef.current;
      hiddenAnchorRef.current!.click();
    });
  };

  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]
  );

  const handleToggleAspectClick = () => {
    if (aspect) {
      setAspect(undefined);
    } else if (imgRef.current) {
      const { width, height } = imgRef.current;
      setAspect(16 / 9);
      setCrop(centerAspectCrop(width, height, 16 / 9));
    }
  };

  const imgStyle = { transform: `scale(${scale}) rotate(${rotate}deg)` };

  return (
    <div className="App">
      <CropControl imgSrc={imgSrc} scale={scale} setScale={setScale} rotate={rotate} setRotate={setRotate} aspect={aspect} onSelectFile={onSelectFile} handleToggleAspectClick={handleToggleAspectClick} />
      {!!imgSrc && (
        <ReactCrop crop={crop} onChange={(_, percentCrop) => setCrop(percentCrop)} onComplete={(c) => setCompletedCrop(c)} aspect={aspect}>
          <img ref={imgRef} alt="Crop me" src={imgSrc} style={imgStyle} onLoad={onImageLoad} />
        </ReactCrop>
      )}
      {!!completedCrop && (
        <>
          <div>
            <canvas ref={previewCanvasRef} style={{ border: "1px solid black", objectFit: "contain", width: completedCrop.width, height: completedCrop.height }} />
          </div>
          <div>
            <Btn color="success" className="mt-2" onClick={onDownloadCropClick}>
              {DownloadCrop}
            </Btn>
            <a ref={hiddenAnchorRef} download className="position-absolute top-100 d-none">
              {HiddenDownload}
            </a>
          <div>
        </>
      )}
    </div>
  );
};
        

npm i react-dragula

import dragula from 'react-dragula';
import  'node_modules/react-dragula/dist/dragula.css';
const DragAndDrop = (props) => {
  const dragulaDecorator = (componentBackingInstance) => {
    if (componentBackingInstance) {
        let options = {};
        dragula([componentBackingInstance], options);
        }
    };
  return (
    <Container  ref={dragulaDecorator}>
      <div>Swap me around</div>
      <div>Swap her around</div>
      <div>Swap him around</div>
      <div>Swap them around</div>
      <div>Swap us around</div>
      <div>Swap things around</div>
      <div>Swap everything around</div>
    </Container>
  )
}

npm i react-dropzone

import React, { Fragment, useState } from "react";
import Dropzone from "react-dropzone";

const CommonFileUpload: React.FC<{ multiple?: boolean }> = ({ multiple }) => {
  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);

  const onDrop = (acceptedFiles: File[]) => {
    setUploadedFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
  };

  const removeFile = (indexToRemove: number) => {
    setUploadedFiles((prevFiles) => prevFiles.filter((_, index) => index !== indexToRemove));
  };

  return (
    <Fragment>
      {/* Dropzone visible only if no files are uploaded */}
      {uploadedFiles.length === 0 ? (
        <Dropzone onDrop={onDrop}>
          {({ getRootProps, getInputProps }) => (
            <div {...getRootProps()} className="dropzone-container">
              <input {...getInputProps()} />
              <p>Drag & drop your file here, or click to select a file</p>
            </div>
          )}
        </Dropzone>
      ) : (
        <Fragment>
          {/* Dropzone for adding more files */}
          {multiple && (
            <Dropzone onDrop={onDrop}>
              {({ getRootProps, getInputProps }) => (
                <div {...getRootProps()} className="add-more-files-zone">
                  <input {...getInputProps()} />
                  <p>Click or drag more files to add</p>
                </div>
              )}
            </Dropzone>
          )}

          {/* Display uploaded files */}
          <div className="uploaded-files">
            {uploadedFiles.map((file, index) => (
              <div key={index} className="file-card">
                {file.type.startsWith("image/") ? <img src={URL.createObjectURL(file)} alt={file.name} className="file-thumbnail" /> : <div className="file-placeholder">{file.name.split(".").pop()?.toUpperCase()} File</div>}
                <p className="file-name">{file.name}</p>
                <p className="file-size">{(file.size / 1024).toFixed(2)} KB</p>
                <button onClick={() => removeFile(index)} className="remove-button" title="Remove file">
                  ×
                </button>
              </div>
            ))}
          </div>
        </Fragment>
      )}
    </Fragment>
  );
};

export default CommonFileUpload;

npm i react-files

import Files from 'react-files'
                              
                              
const UploadImage = () =>  {
      const [files, setFiles] = useState([]);
      
      function deleteFile(e) {
        setFiles([]);
        return files
      }
      const onFilesChange = (files) => {
        setFiles(files)
      }
      const onFilesError = (error, file) => {
        setFiles(file)
      }
    
      return (
          <Files
            className='files-dropzone fileContainer'
            onChange={onFilesChange}
            onError={onFilesError}
            accepts={['image/*']}
            multiple={false}
            maxFileSize={10000000}
            minFileSize={0}
            clickable
          >
              {
                files.length > 0
                    ? <div className='files-gallery'>
                        {files.map((file,index) =>
                            <img className='files-gallery-item' alt="img" src={file.preview.url} key={index} />
                        )}
                    </div>
                    : <div className="d-flex justify-content-center">
                        <button className="chooseFileButton me-2">Upload Image</button>
                      </div>
            }
        </Files>
      )
   }

npm i react-bootstrap-typeahead

import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
const Example = () => {
  const [multiple, setMultiple] = useState(false);
  return(
    <Cardbody>
        <Typeahead
          id="basic-typeahead"
          labelKey="name"
          multiple={multiple}
          options={options}
          placeholder="Choose a state..."
        />
    </Cardbody>
  )
}

npm i react-data-table-component

import ReactTable from 'react-data-table-component';
const Example = () => {
  const Data = [
    {id:"1",name: "Product Menu",status: <i className="fa fa-circle font-success f-12" />,creat_on:"2018-04-18T00:00:00"},
    {id:"2",name: "Category Menu",status: <i className="fa fa-circle font-warning f-12" />,creat_on:"2018-04-18T00:00:00"}
  ]
  const Columns = [
        {name: 'ID',selector: 'id',sortable: true,center:true,},
        {name: 'Name',selector: 'name',sortable: true,center:true,},
        {name: 'Status',selector: 'status',sortable: true,center:true},
        {name: 'Creat_on',selector: 'creat_on',sortable: true,center:true},
    ];
return (
  <Fragment>
    <ReactTable
        columns={Columns}
        data={Data}
        noHeader
        pagination
    />
  </Fragment>
)
}

npm i react-google-charts

import React from 'react';
import { GoogleChart } from "react-google-charts";
 
const GoogleCharts = (props) => {
    return (
      <GoogleChart
            width={'100%'}
            height={'400px'}
            chartType="PieChart"
            loader={<div>Loading Chart</div>}
            data={[
                ['Task', 'Hours per Day'],
                ['Work', 6.7],
                ['Eat', 13.3],
                ['Commute', 20],
                ['Watch TV', 26.7],
                ['Sleep', 33.3],
            ]}
            options={{
                title: 'My Daily Activities',
                colors: ["#51bb25", "#7366ff", "#f73164", "#148df6", "#ff5f24"]
                
            }}
            rootProps={{ 'data-testid': '1' }}
      />
    );
}

npm i react-chartjs-2

/* chartData.jsx */
export const Data = {
  labels: ['Mon', 'Tue', 'Wen', 'Thus', 'Fri', 'Sat', 'Sun'],
  datasets: [
        {
            label: 'y',
            lagend: 'y',
            data: [35, 59, 80, 81, 56, 55, 40],
            borderColor: "#7366ff",
            backgroundColor: "rgba(145, 46, 252, 0.4)",
            highlightFill: "rgba(145, 46, 252, 0.4)",
            highlightStroke: "#7366ff",
            borderWidth: 2
        },
        {
            label: 'z',
            lagend: 'z',
            data: [28, 48, 40, 19, 86, 27, 90],
            borderColor: "#f73164",
            backgroundColor: "rgba(247, 49, 100, 0.4)",
            highlightFill: "rgba(247, 49, 100, 0.4)",
            highlightStroke: "#f73164",
            borderWidth: 2
        }
    ],
    plugins: {
        datalabels: {
            display: false,
            color: 'white'
        }
    }
}
export const Options = {
  maintainAspectRatio: true,
    legend: {
        display: false,
    },
    plugins: {
        datalabels: {
            display: false,
        }
    }
}
 
import { Bar } from 'react-chartjs-2';
import { Data,Option} from './chartData';

const ChartjsExample = () => {
  return(
    <Cardbody>
      <Bar 
          data={Data}
          width={778}
          height={400}
          options={Options} 
      />
    </Cardbody>
  )
}

npm i react-leaflet

import { Map as LeafletMap, TileLayer, GeoJSON, Marker, Popup } from 'react-leaflet';
import WorldData from 'world-map-geojson';
const LeafletMap = () => {
  return(
          <div id="gmap-simple" >
            <LeafletMap
                        center={[50, 10]}
                        zoom={6}
                        maxZoom={10}
                        attributionControl={true}
                        zoomControl={true}
                        doubleClickZoom={true}
                        scrollWheelZoom={true}
                        dragging={true}
                        animate={true}
                        easeLinearity={0.35}
                    >
            <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' />
            <Marker position={[50, 10]}>
            <Popup>
                  Popup for any custom information.
            </Popup>
            </Marker>
            </LeafletMap>
          </div>
      )
}

npm i react-simplemde-editor

import SimpleMDE from "react-simplemde-editor";

const [text,setText] = useState(`Enter text in the area on the left. For more info, click the ? (help) icon in the menu.`)

const handleChange = () => {
    setText("Enter text in the area on the left. For more info, click the ? (help) icon in the menu.")
}

const MdeEDitor  =  () =>  {
  return (
    <SimpleMDE
          id="editor_container"
          onChange={handleChange}
          value={text}
          options={{
              autofocus: true,
              spellChecker: false
          }}
    />
    )
  }

npm i prism-react-renderer

import React from 'react';
import { Card, CardBody, Col } from 'reactstrap';
import { Highlight, themes } from "prism-react-renderer";
import { CssData } from '@/Data/Editor';
import CardHeaderCommon from '@/CommonComponents/CardHeaderCommon';

const CssMode = () => {
  return (
    <Col xl="6">
       <Card>
         <CardHeaderCommon title="CSS Mode" />
         <CardBody>
           <Highlight theme={themes.vsDark} code={CssData} language="css">
            {({ style, tokens, getLineProps, getTokenProps }) => (
               <pre style={style}>
                {tokens.map((line, i) => (
                   <div key={i} {...getLineProps({ line })}>
                    {line.map((token, key) => (
                       <span key={key} {...getTokenProps({ token })} />
                    ))}
                   </div>
                ))}
               </pre>
            )}
           </Highlight>
         </CardBody>
       </Card>
     </Col>
  );
};
export default CssMode;