npm i react-perfect-scrollbar

<
import ScrollBar from 'react-perfect-scrollbar'

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

Remove package from project

npm remove react-perfect-scrollbar

npm i @progress/kendo-react-treeview

import { handleTreeViewCheckChange, processTreeViewItems, TreeView, TreeViewCheckDescriptor, TreeViewExpandChangeEvent } from "@progress/kendo-react-treeview";
import { useState } from "react";
import { Card, CardBody } from "reactstrap";
import { basicTreeData, treeViewList } from "../../../../Data/BonusUi/TreeView/TreeView";
import { BasicTree } from "../../../../utils/Constant";
import CardHeaderCommon from "../../CardHeaderCommon/CardHeaderCommon";

const BasicTrees = () => {
  const checkField = "checked";

  type TreeState = {
    check: TreeViewCheckDescriptor;
    items: typeof treeViewList;
  };

  const [treeState, setTreeState] = useState<TreeState>({
    check: { idField: "text", applyCheckIndeterminate: true, ids: [] },
    items: treeViewList,
  });

  const onCheckChange = (event: any) => {
    const settings = { checkChildren: true, checkParents: true };
    const newCheck = handleTreeViewCheckChange(event, treeState.check, treeState.items, settings) as TreeViewCheckDescriptor;
    setTreeState((prevState) => ({
      ...prevState,
      check: { ...prevState.check, ...newCheck },
    }));
  };

  const onExpandChange = (event: TreeViewExpandChangeEvent) => {
    event.item.expanded = !event.item.expanded;
    setTreeState((prevState) => ({
      ...prevState,
      items: [...prevState.items],
    }));
  };
  return (
    <Card>
      <CardHeaderCommon title={BasicTree} span={basicTreeData} headClass="pb-0" />
      <CardBody>
        <div className="tree-container">
          <div className="checkbox">
            <TreeView
              data={processTreeViewItems(treeState.items, {
                check: treeState.check,
              })}
              checkField={checkField}
              checkboxes={true}
              onCheckChange={onCheckChange}
              expandIcons={true}
              onExpandChange={onExpandChange}
            />
          </div>
        </div>
      </CardBody>
    </Card>
  );
};

export default BasicTrees;

Remove package from project

npm remove @progress/kendo-react-treeview

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

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

 return (
   <>
      <Btn color="primary" onClick={toggle}>{TopRightToasts}</Btn>
      <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-dropzone

import { FC, Fragment, useState } from "react";
import Dropzone from "react-dropzone";
import { H5, SVG } from "../../AbstractElements";

const CommonFileUpload: 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>
      {uploadedFiles.length === 0 ? (
        <Dropzone onDrop={onDrop}>
          {({ getRootProps, getInputProps }) => (
            <div {...getRootProps()} className="dropzone-container">
              <input {...getInputProps()} />
              <div className="dz-message mt-5">
                <SVG iconId="file-upload1" />
                <H5>Drag Files or Click to Browse</H5>
              </div>
            </div>
          )}
        </Dropzone>
      ) : (
        <Fragment>
          {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>
          )}

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

Remove package from project

npm remove react-dropzone

npm i @sjmc11/tourguidejs

import { tourSteps } from "../../../Data/BonusUi/Tour/Tour";
import TourMain from "./TourMain";
import { useEffect, useRef, useState } from "react";
import { toast } from "react-toastify";
import { TourGuideClient } from "@sjmc11/tourguidejs";

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

  useEffect(() => {
    try {
      tourRef.current = new TourGuideClient({ steps: tourSteps });
    } 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 <TourMain />;
};

export default TourContainer;
              

Remove package from project

npm remove @sjmc11/tourguidejs

npm i sweetalert2

import SweetAlert from "sweetalert2";

const BasicExample = () => {
  const displayAlert = () => {
    SweetAlert.fire("Welcome! to the Crocs theme");
  };

return (
  <Card className="height-equal">
    <CardBody className="btn-showcase">
      <Btn color="primary" className="sweet-1" type="button" onClick={displayAlert}>{ClickIt}</Btn>
    </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 cstyle={{ color: "var(--theme-default)" }} className="d-flex justify-content-center flex-wrap">
              <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";

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>
          <Link to={Href} ref={hiddenAnchorRef} download className="position-absolute top-100 d-none">{HiddenDownload}</Link>
        </div>
      </>
    )}
  </div>
)
}
                  

Remove package from project

npm remove react-image-crop