Advance UI Elements
Scrollable Offical link Preview link
npm i react-perfect-scrollbar<
import Scrollbars from "react-perfect-scrollbar";
const CustomScrollbar = () => {
return (
<Card>
<CardBody>
<ScrollBar style={{ width: "100%", height: "300px" }} className="scroll-demo">
<H5>Custom Scrollbar</H5>
<P>Custom Scrollbar</P>
</ScrollBar>
</CardBody>
</Card>
)}
Remove package from project
npm remove react-perfect-scrollbarTree Offical link Preview link
npm i @progress/kendo-react-treeviewimport CommonCardHeader from "@/CommonComponent/CommonCardHeader";
import { BasicTree } from "@/Constant";
import { BasicTreeData, TreeViewList } from "@/Data/BonusUi/TreeView";
import { BasicTreesProp } from "@/Types/BonusUiType";
import cx from "classnames";
import { handleTreeViewCheckChange, processTreeViewItems, TreeView, TreeViewCheckDescriptor, TreeViewExpandChangeEvent } from "@progress/kendo-react-treeview";
import { FaCheckSquare, FaMinusSquare, FaSquare } from "react-icons/fa";
import { IoMdArrowDropright } from "react-icons/io";
import { Card, CardBody } from "reactstrap";
import { useState } from "react";
export const ArrowIcon: React.FC<BasicTreesProp> = ({ isOpen, className }) => {
const baseClass = "arrow";
const classes = cx(baseClass, { [`${baseClass}--closed`]: !isOpen }, { [`${baseClass}--open`]: isOpen }, className);
return <IoMdArrowDropright className={classes} />;
};
export const CheckBoxIcon = ({ variant, ...rest }: BasicTreesProp) => {
switch (variant) {
case "all":
return <FaCheckSquare color="#53A653" {...rest} />;
case "none":
return <FaSquare color="white" {...rest} style={{ border: "1px solid #80808069" }} />;
case "some":
return <FaMinusSquare {...rest} color="#5C61F2" />;
default:
return null;
}
};
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: any) => ({ ...prevState, items: [...prevState.items] }));
};
return (
<Card>
<CommonCardHeader title={BasicTree} span={BasicTreeData} />
<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-treeviewToaster Offical link Preview link
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">Lagos theme</strong>
<small>5 min ago</small>
</ToastHeader>
<ToastBody className="toast-dark">Hello, I'm a web-designer.</ToastBody>
</Toast>
</div>
</>
)}
Dropzone Offical link Preview link
npm i react-dropzoneimport RatioImage from "@/CommonComponent/RatioImage";
import React, { Fragment, useState } from "react";
import Dropzone from "react-dropzone";
const CommonFileUpload: React.FC<{ multiple?: boolean }> = ({ multiple }) => {
const [uploadedFiles, setUploadedFiles] = useState([]);
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
</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/") ? <RatioImage 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-dropzoneTour Offical link Preview link
npm i @sjmc11/tourguidejsimport { TourSteps } from "@/Data/BonusUi/Tour";
import { TourGuideClient } from "@sjmc11/tourguidejs";
import TourMain from "./TourMain";
import { useEffect, useRef, useState } from "react";
import { toast } from "react-toastify";
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/tourguidejsSweetalert Offical link Preview link
npm i sweetalert2import SweetAlert from "sweetalert2";
const BasicExample = () => {
const displayAlert = () => {
SweetAlert.fire("Welcome! to the Lagos 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 sweetalert2Range slider Offical link Preview link
npm i react-rangeimport { 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-rangeImage cropper Offical link Preview link
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