Vyzor React Typescript

https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html
Admin
Vyzor is a premium admin and dashboard template built with React, TypeScript, CSS3, and...
Tokens:19,500
Snippets:80
Trust Score:6.5
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install and Use React Select

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Details the installation and usage of React Select, a versatile dropdown component for React. It requires the 'react-select' package and is demonstrated with dynamic import for server-side rendering considerations. The example includes defining select options and configuring the component.

```bash
npm i react-select
```

```jsx
const SpkSelect = dynamic(() => import("@/shared/@spk-reusable-components/reusable-plugins/spk-reactselect"), { ssr: false });
<SpkSelect name="state" option={Selectoption1} mainClass="basic-multi-select " searchable
menuplacement='auto' classNameprefix="Select2" defaultvalue={[Selectoption1[0]]}/>
                            

```

```typescript
interface Selectoption {
    value: string;
    label: string;
}
export const Selectoption1: Selectoption[] = [
    { value: "Selection-1", label: "Selection-1" },
    { value: "Selection-2", label: "Selection-2" },
    { value: "Selection-3", label: "Selection-3" },
    { value: "Selection-4", label: "Selection-4" },
    { value: "Selection-5", label: "Selection-5" }
];

```

--------------------------------

### React Leaflet Map Installation and Basic Usage

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Provides instructions for installing the 'react-leaflet' and 'leaflet' packages and demonstrates a basic setup for displaying a map with a marker. It utilizes dynamic imports for SSR compatibility and requires CSS import for Leaflet.

```bash
npm i react-leaflet leaflet 
```

```javascript
const SpkLeaflet = dynamic(() => import('@/shared/@spk-reusable-components/reusable-plugins/spk-leaflet'), { ssr: false });
//
const position: any = [51.505, -0.09];

<SpkLeaflet position={position} Zoom={13} scrollWheel={true} Customclass="mapleaflet ht-300" Id="leaflet1" />

```

```css
  <!-- Leaflet Maps CSS -->
@import "leaflet/dist/leaflet.css";
```

--------------------------------

### Install Project Dependencies

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Installs all necessary project dependencies using either npm or yarn. It's crucial to use the correct package manager for your project. After installation, ensure you remove the lock file corresponding to the package manager you did not use (e.g., `yarn.lock` if using npm).

```bash
npm install
```

```bash
yarn install
```

--------------------------------

### Pigeon Maps Installation and Basic Usage

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Details the installation of the 'pigeon-maps' package and shows a basic example of rendering a map with zoom and center controls. It uses React state to manage the map's center and zoom level.

```bash
npm i pigeon-maps 
```

```javascript
import { Map, Marker, Overlay, Draggable, ZoomControl,  } from 'pigeon-maps'
//
const [center, setCenter] = useState<[number, number]>([50.879, 4.6997])
const [zoom, setZoom] = useState(11)

<div id="vector-map">
    <Map height={300} center={center} zoom={zoom} onBoundsChanged={({ center, zoom }) => { setCenter(center); setZoom(zoom) }} />
</div>

```

--------------------------------

### Run Development Server

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Starts the development server to allow you to view and test your application locally. The application will typically be accessible at `http://localhost:5173/` by default. Use the command corresponding to your package manager (npm or yarn).

```bash
npm run dev
```

```bash
yarn run dev
```

--------------------------------

### Install and Use React DatePicker

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Installs and shows how to integrate React DatePicker for date selection in React applications. It depends on the 'react-datepicker' package and requires importing its CSS. The example includes state management for selected dates and a functional date change handler.

```bash
npm i react-datepicker
```

```jsx
import SpkDatepickr from "@/shared/@spk-reusable-components/reusable-plugins/spk-datepicker"
                            
const [dates, setDates] = useState<{ [key: string]: Date | string | null }>({});
const handleDateChange = (key: string, date: Date | null) => {
    if (date) {
        setDates((prevDates) => ({
            ...prevDates,
            [key]: date,
        }));
    } else {
        setDates((prevDates) => {
            const { [key]: removedKey, ...rest } = prevDates;
            return rest;
        });
    }
};
                                                
<Form.Group>
    <InputGroup className="datepicker-inputwraper">
        <InputGroup.Text className="input-group-text text-muted"> <i className="ri-calendar-line"></i></InputGroup.Text>
        <SpkDatepickr className="form-control" placeholderText="Choose date"  selected={dates["basicDate"] ? new Date(dates["basicDate"]) : null} onChange={(date: Date | null) => handleDateChange("basicDate", date)}/>
    </InputGroup>
</Form.Group>
                            

```

```css
@import 'react-datepicker/dist/react-datepicker.css';
```

--------------------------------

### Install and Use React GridJs Table

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Installs the gridjs-react and gridjs packages. Demonstrates how to import and use the SpkGridjstables component with provided data and column definitions. Assumes Data and Columns are defined elsewhere.

```bash
npm i gridjs-react gridjs
```

```jsx
import SpkGridjstables from "@/shared/@spk-reusable-components/reusable-plugins/spk-gridjstables";
<SpkGridjstables Data={Data} Columns={["Date", "Name", "Email", "Id", "Price", "Quantity", "Total"]} />
```

```javascript
export const Data = [
["24-10-2022 12:47", "john", "john123@gmail.com", "#12012", "$1799", "1", "$1799"],
["12-09-2022 04:24", "mark", "markzenner23@gmail.com", "#12013", "$2479", "2", "$4958"],
["18-11-2022 18:43", "eoin", "eoin1992@gmail.com", "#12014", "$769", "1", "$769"],
["10-09-2022 10:35", "sarahcdd", "sarahcdd129@gmail.com", "#12015", "$1299", "3", "$3997"],
["27-10-2022 09:55", "afshin", "afshin@example.com", "#12016", "$1449", "1", "$1449"]
];

type GridData = Array<[string, string, string, string, string, string, string]>;

export const Data1 = (): Promise<GridData> => {
return new Promise(resolve => {
    setTimeout(() =>
        resolve([
            ["24-10-2022 12:47", "john", "john123@gmail.com", "#12012", "$1799", "1", "$1799"],
            ["12-09-2022 04:24", "mark", "markzenner23@gmail.com", "#12013", "$2479", "2", "$4958"],
            ["18-11-2022 18:43", "eoin", "eoin1992@gmail.com", "#12014", "$769", "1", "$769"],
            ["10-09-2022 10:35", "sarahcdd", "sarahcdd129@gmail.com", "#12015", "$1299", "3", "$3997"],
            ["27-10-2022 09:55", "afshin", "afshin@example.com", "#12016", "$1449", "1", "$1449"]
        ]), 2000);
});
};

```

```css
<!-- Swiper Css -->
 @import "gridjs/dist/theme/mermaid.css";
```

--------------------------------

### Install SASS Package (npm)

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Installs the SASS package for SCSS to CSS conversion using npm. This is a fundamental step before configuring build scripts.

```bash
npm install sass

```

--------------------------------

### Install with Legacy Peer Dependencies

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Installs npm packages while bypassing peer dependency checks using the `--legacy-peer-deps` flag. This can help resolve installation issues caused by incompatible peer dependencies. Be aware that this might lead to runtime issues if peer dependencies are critical for functionality.

```bash
npm install--legacy-peer-deps
```

--------------------------------

### Install and Use React SunEditor

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Installs and demonstrates the basic usage of React SunEditor, a lightweight and customizable rich text editor for React applications. It requires the 'suneditor-react' package and includes CSS import for styling. The default content can be pre-filled.

```bash
npm i suneditor-react
```

```jsx
import SpkSunEditor from "@/shared/@spk-reusable-components/reusable-plugins/spk-suneditor";
                            
<SpkSunEditor defaulContent={defaultContent} />
                            

```

```css
@import 'suneditor/dist/css/suneditor.min.css';
```

```jsx
const defaultContent = `
 <h4><b className="ql-size-large">Quill Snow</b> is a free, open source <a href="https://github.com/quilljs/quill/" target="_blank">Quill Editor</a> built for the modern web. With its <a href="https://quilljs.com/docs/modules/" target="_blank">modular architecture</a> and expressive API, it is completely customizable to fit any need.</h4>
 <p><br/></p>
 <ol>
     <li className="ql-size-normal">Write text, select, and edit with multiple options.</li>
     <li className="">This is quill snow editor.</li>
     <li className="">Easy to customize and flexible.</li>
 </ol>
 <p><br/></p>
 <h4>Quill officially supports a standard toolbar theme <a href="https://github.com/quilljs/quill/" target="_blank">"Snow"</a> and a floating tooltip theme <a href="https://github.com/quilljs/quill/" target="_blank">"Bubble"</a></h4>
 `;
```

--------------------------------

### Install and Use React-ApexCharts for Line Charts

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Shows how to install and implement React-ApexCharts for creating interactive line charts. It covers importing the chart component and data, and rendering a basic line chart with specified options and series. Dependencies include 'apexcharts' and 'react-apexcharts'.

```bash
npm i apexCharts react-apexCharts
```

```jsx
import Spkapexcharts from "@/shared/@spk-reusable-components/reusable-plugins/spk-apexcharts";
import * as linechartdata from "@/shared/data/charts/apexcharts/linechartsdata";

    <Spkapexcharts chartOptions={linechartdata.Linebasicoptions} chartSeries={linechartdata.Linebasicseries} type="line" width={"100%"} height={300} />
```

```javascript
export const Linebasicseries = [{
    name: "Desktops",
    data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
  }]

export const Linebasicoptions: any = {
    chart: {
      height: 320,
      type: 'line',
      zoom: {
        enabled: false
      }
    },
    colors: ['#8b7eff'],
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'straight',
      width: 3,
    },
    grid: {
      borderColor: '#f2f5f7',
    },
    title: {
      text: 'Product Trends by Month',
      align: 'left',
      style: {
        fontSize: '13px',
        fontWeight: 'bold',
        color: '#8c9097'
      },
    },
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
      labels: {
        show: true,
        style: {
          colors: "#8c9097",
          fontSize: '11px',
          fontWeight: 600,
          cssClass: 'apexcharts-xaxis-label',
        },
      }
    },
    yaxis: {
      labels: {
        show: true,
        style: {
          colors: "#8c9097",
          fontSize: '11px',
          fontWeight: 600,
          cssClass: 'apexcharts-yaxis-label',
        },
      }
    },
  }
```

--------------------------------

### Force Install Dependencies

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Forces the installation of npm dependencies, even if there are potential conflicts or unmet peer dependencies. This should be used with caution as it may lead to unexpected behavior or conflicts. It's recommended to test thoroughly after using this command.

```bash
npm install --force
```

--------------------------------

### Install and Use React Ratings (MUI)

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Installs the @mui/material package for Material-UI components. Shows how to import and use the SpkRatings component to display an interactive rating system. Configuration includes name, size, default value, and maximum rating.

```bash
npm i @mui/material
```

```jsx
import SpkRatings from "@/shared/@spk-reusable-components/reusable-plugins/spk-ratings";
                            
<SpkRatings name="half-rating" size="large" defaultValue={0} max={5} />
```

--------------------------------

### Install and Use React Toastify Notification

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Installs the react-toastify package. Demonstrates how to import and use the SpkToastify component for displaying notifications, along with a button to trigger a toast message. Assumes SpkButton and SpkToastify components are correctly implemented.

```bash
npm i react-toastify
```

```jsx
import SpkToastify from "@/shared/@spk-reusable-components/reusable-plugins/spk-toastify";
 import SpkButton from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-buttons";
                            
 <SpkButton  Buttonvariant="primary" Id="toast-button" onClickfunc={notify}>Click For Live Toast</SpkButton>  
 <SpkToastify position="top-right"/>
```

--------------------------------

### Install Firebase in React Project

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Installs the latest version of the Firebase package as a dependency in your React project using npm. This is the first step to integrating Firebase services.

```bash
npm install firebase --save
```

--------------------------------

### Install and Use Swiper JS Carousel in React

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Demonstrates how to install the Swiper JS React component and its basic usage. It includes importing the necessary modules and data, and rendering the carousel with custom class names. Dependencies include 'swiper' and 'react-swiper'.

```bash
npm i swiper react-swiper
```

```jsx
import SpkSwiperJs from "@/shared/@spk-reusable-components/reusable-plugins/spk-swiperjs";
import * as swiperdata from "@/shared/data/general/adavanec-ui/swiperjsdata";

<SpkSwiperJs slides={swiperdata.Basicdata} spaceBetween={30} centeredSlides={true} autoplay={true} className="mySwiper swiper-basic"/>
```

```css
<!-- Swiper Css -->
    @import "swiper/swiper-bundle.css";
```

```jsx
import Image from "React/image";

    <!-- Swiper Data -->
    export const Basicdata = [
    <div><Image fill src="../../../assets/images/media-27.jpg" className="!rounded-md" alt="" /></div>,
    <div><Image fill src="../../../assets/images/media-26.jpg" className="!rounded-md" alt="" /></div>,
    <div><Image fill src="../../../assets/images/media-25.jpg" className="!rounded-md" alt="" /></div>,
     ];
```

--------------------------------

### React Bootstrap Tooltip Component with Data

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Implements customizable tooltips in React applications using React Bootstrap. Tooltips provide additional information on hover or focus. This example dynamically creates tooltips based on positions defined in `Tooltipdirtooltip`. Requires React, React Bootstrap, and associated data.

```jsx
import SpkTooltips from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-tooltips";
    import {Tooltipdirtooltip } from "@/shared/data/general/ui-elements/tooltipsdata";
    
        {Tooltipdirtooltip.map((idx: any) => (
            <SpkTooltips placement={idx.text} title={`Tooltip on ${idx.text}`} key={Math.random()}>
                <SpkButton Buttontype="button" Buttonvariant="primary">
                    Tooltip on {idx.text}
                </SpkButton>
            </SpkTooltips>
        ))}

```

```typescript
interface direction {
    id: number
    text: string
}
export const Tooltipdirtooltip: direction[] = [
    { id: 1, text: "top" },
    { id: 2, text: "right" },
    { id: 3, text: "bottom" },
    { id: 4, text: "left" }
];
```

--------------------------------

### React Bootstrap Dropdown Menu Component with Data

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Creates interactive dropdown menus in React using React Bootstrap. Supports customization of triggers and menu items. This example uses data from `SingleButtons` for dynamic menu generation. Requires React, React Bootstrap, and associated data.

```jsx
import SpkDropdown from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-dropdown";
import {SingleButtons} from "@/shared/data/general/ui-elements/dropdownsdata";
    
        {SingleButtons.map((idx) => (
            <SpkButtongroup  key={Math.random()}>
                <SpkDropdown  Togglevariant={idx.class} Navigate="#!"  Toggletext="Action" Menuas="ul">
                        <Dropdown.Item as="li" href="#!">Action</Dropdown.Item>
                        <Dropdown.Item as="li" href="#!">Another action</Dropdown.Item>
                        <Dropdown.Item as="li" href="#!">Something else here</Dropdown.Item>
                        <li>
                            <hr className="dropdown-divider" />
                        </li>
                        <Dropdown.Item as="li" href="#!">Separated link</Dropdown.Item>
                </SpkDropdown>
            </SpkButtongroup>
        ))}

```

```typescript
interface split {
        id: number
        class: string
    }
    export const SingleButtons: split[] = [
    { id: 1, class: "primary" },
    { id: 5, class: "secondary" },
    { id: 6, class: "success" },
    { id: 7, class: "info" },
    { id: 8, class: "warning" },
    { id: 9, class: "danger" }
    ];
```

--------------------------------

### React Bootstrap Button Group Implementation

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Illustrates the usage of React Bootstrap Button Group component to cluster multiple buttons. This example shows a basic group with three info-variant buttons, each containing an icon. It requires the SpkButtongroup and SpkButton components.

```jsx
import SpkButton from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-buttons";
import SpkButtongroup from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-buttongroup";
    
    <SpkButtongroup Buttongrplabel="Basic example">
        <SpkButton Buttonvariant="info" Buttontype="button"><i className="bi bi-skip-backward"></i></SpkButton>
        <SpkButton Buttonvariant="info" Buttontype="button"><i className="bi bi-pause"></i></SpkButton>
        <SpkButton Buttonvariant="info" Buttontype="button"><i className="bi bi-skip-forward"></i></SpkButton>
    </SpkButtongroup>
```

--------------------------------

### Build Application for Production

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Builds a production-ready version of your application, optimizing it for deployment. This command bundles your code, assets, and other necessary files into a deployable format. Use the command corresponding to your package manager (npm or yarn).

```bash
npm run build
```

```bash
yarn run build
```

--------------------------------

### Create React Component using React CLI

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

This command generates a new React component with associated files like template, CSS, and testing specifications. Replace `<component-name>` with the desired name for your component. The command creates a dedicated folder for the component and its related files.

```bash
generate-react-cli component <component-name>
```

--------------------------------

### Compile SCSS to CSS (npm run)

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Executes the npm scripts to compile SCSS files into CSS. 'npm run sass' performs a standard compilation, while 'npm run sass-min' creates compressed CSS files, optimizing for production.

```bash
npm run sass

```

```bash
npm run sass-min

```

--------------------------------

### Configure SCSS to CSS Compilation (package.json)

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Sets up npm scripts in `package.json` to compile SCSS files to CSS. It defines a 'sass' script for standard compilation and a 'sass-min' script for compressed output. Ensure paths match your project structure.

```json
"scripts": {
    "sass": "sass ./src/assets/scss:./src/assets/css/",
    "sass-min": "sass ./src/assets/scss:./src/assets/css/ --style compressed"
  }

```

--------------------------------

### Configure Basic Routing with React Router (React TSX)

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Sets up basic routing for a single-page application using React Router. It demonstrates importing necessary components, defining routes with specific paths, and rendering different components based on the URL. This configuration is typically placed in the main entry file.

```tsx
import React, { Fragment, lazy } from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
            
//component import
import App from './pages/App.tsx';
import Crm from './container/dashboards/crm/crm.tsx';
import Ecommerce from './container/dashboards/ecommerce/ecommerce.tsx';
import Crypto from './container/dashboards/crypto/crypto.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.Fragment>
        <BrowserRouter>
            <React.Suspense>
                <Routes>
                <Route path={`${import.meta.env.BASE_URL}/`} element={<App />}>
                <Route index element={<Sales />} />
                    <Route path={`${import.meta.env.BASE_URL}dashboards/sales`} element={<Sales />}/>
                    <Route path={`${import.meta.env.BASE_URL}dashboards/analytics`} element={<Analytics />}/>
                </Route>
                </Routes>
            </React.Suspense>
        </BrowserRouter>
    </React.Fragment>
)
```

--------------------------------

### Configure Firebase Authentication and Firestore in React

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Sets up Firebase initialization with your project's API configuration details. It exports the Firestore database instance and the authentication instance for use throughout the application. Ensure your database is created on Firebase before implementing this.

```javascript
const firebaseConfig = {
   apiKey: "***",
   authDomain: "***",
   projectId: "***",
   storageBucket: "***",
   messagingSenderId: "***",
   appId: "***",
   measurementId: "***",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebaseApp.firestore();
const auth = firebase.auth();

export { db, auth };
```

--------------------------------

### React App Root Layout Structure

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Defines the main layout structure for the Vyzor React application. It includes essential components like Header, Sidebar, Footer, and manages routing with Outlet and Redux store integration. This file acts as the entry point for the application's UI.

```tsx
import { Fragment } from "react/jsx-runtime"
    import Switcher from "../components/switcher/switcher"
    import Header from "../components/header/header"
    import Sidebar from "../components/sidebar/sidebar"
    import Footer from "../components/footer/footer"
    import Backtotop from "../components/backtotop/backtotop"
    import { useState } from "react"
    import { Outlet } from "react-router-dom"
    import { Provider } from "react-redux"
    import { store } from "../components/common/ui/redux/store"
    import { Initialload } from "../components/contextapi"

    function App() {

      const [pageloading, setpageloading] = useState (false);
        return (
        <>
          <Fragment>
            <Initialload.Provider value={{ pageloading, setpageloading }}>
                <Provider store={store}>
                <div ref={progressRef} className="progress-top-bar"></div>
                  <Switcher />
                  <div className='page'>
                    <Header />
                    <Sidebar />
                    <div className='main-content app-content'>
                      <div className='container-fluid'>
                        <Outlet />
                      </div>
                    </div>
                    <Footer />
                  </div>
                  <Backtotop />
                </Provider>
            </Initialload.Provider>
          </Fragment>
        </>
       )
    }

    export default App  
```

--------------------------------

### Background Image Style Options

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Enables the use of background images for different parts of the UI, with five distinct styles ('bgimg1' through 'bgimg5') controlled by the `data-bg-img` attribute.

```html
data-bg-img="bgimg1"

```

```html
data-bg-img="bgimg2"

```

```html
data-bg-img="bgimg3"

```

```html
data-bg-img="bgimg4"

```

```html
data-bg-img="bgimg5"

```

--------------------------------

### React Bootstrap Popovers Implementation

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Demonstrates the implementation of React Bootstrap Popovers. It utilizes a `SpkPopovers` component and maps over `Defaultalerts` data to create multiple popovers with different placements and content. Requires `SpkPopovers` and `SpkButton` components.

```jsx
import SpkPopovers from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-popovers";
import {Defaultalerts} from "@/shared/data/general/ui-elements/popoverdata";
    
        {Defaultalerts.map((idx: any) => (
            <SpkPopovers trigger="click" placement={idx.class} key={Math.random()} title={`Popover ${idx.text}`} content={`And here's some amazing content. It's very engaging. ${idx.text}?`}>
                <SpkButton Buttonvariant='outline-primary'>Popover {idx.text}</SpkButton>
            </SpkPopovers>
        ))}
    
```

--------------------------------

### HTML Root Configuration for Vyzor

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

This snippet shows the main `<html>` tag with various attributes to control the overall theme and layout of the Vyzor application. These attributes are typically set in `mainhead.html` or a similar root configuration file.

```html
<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="transparent" data-width="fullwidth" data-menu-styles="transparent" data-page-style="flat" data-toggled="close"  data-vertical-style="doublemenu" data-toggled="double-menu-open">

```

--------------------------------

### Width Options: Default, Full, Boxed

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Controls the content width of the application, offering 'default', 'full-width', and 'boxed' options via the `data-width` attribute.

```html
data-width="default"

```

```html
data-width="full-width"

```

```html
data-width="boxed"

```

--------------------------------

### React Bootstrap Buttons Implementation

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Demonstrates how to use pre-styled, responsive React Bootstrap Button components. It maps over a data array to render multiple buttons with different variants and custom classes. This snippet requires the SpkButton component and the DefaultButtons data array.

```jsx
import SpkButton from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-buttons";
    import {DefaultButtons} from "@/shared/data/general/ui-elements/buttonsdata";
        
        <div className="btn-list">
            {DefaultButtons.map((idx) => (
                <SpkButton Buttontype="button" Buttonvariant={idx.class} Customclass="waves-effect waves-light me-2" key={Math.random()}>{idx.text}</SpkButton>
            ))}
        </div>
```

```typescript
interface buttons1 {
    id: number
    text: string
    class: string
}
export const DefaultButtons: buttons1[] = [
    { id: 1, class: "primary", text: " Primary" },
    { id: 2, class: "primary1", text: " Primary1" },
    { id: 3, class: "primary2", text: " Primary2" },
    { id: 4, class: "primary3", text: " Primary3" },
    { id: 5, class: "secondary", text: "  Secondary" },
    { id: 6, class: "success", text: " Success" },
    { id: 7, class: "danger", text: "  Danger" },
    { id: 8, class: "warning", text: "  Warning" },
    { id: 9, class: "info", text: "Info" },
    { id: 10, class: "light", text: " Light" },
    { id: 11, class: "dark", text: "  Dark" },
    { id: 12, class: "link", text: "Link" },
];
```

--------------------------------

### React Bootstrap Progress Bar Implementation

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Shows how to implement React Bootstrap progress bars using the `SpkProgress` component. It iterates through `progressdata` to render multiple progress bars with varying completion percentages.

```jsx
 import SpkProgress from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-progress";
 import {progressdata} from "@/shared/data/general/ui-elements/progressdata";
    
        {progressdata.map((idx) => (
            <SpkProgress key={Math.random()} variant="primary" now={idx.data} mainClass="progress mb-3" />
        ))}


```

--------------------------------

### Navigation Style Options

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Provides various styles for the navigation menu, including 'menu-click', 'menu-hover', 'icon-click', and 'icon-hover'. These are controlled by the `data-nav-style` attribute.

```html
data-nav-style="menu-click"

```

```html
data-nav-style="menu-hover"

```

```html
data-nav-style="icon-click"

```

```html
data-nav-style="icon-hover"

```

--------------------------------

### React Sidebar Navigation Menu Configuration

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Demonstrates how to add and configure menu items for the sidebar in a React project using the Vyzor template. Menu items are defined within the `MenuItems` array in `nav.tsx`. Various types of menu links ('link', 'sub', 'external', 'empty') and their properties are illustrated.

```tsx
     {
       menutitle: "Your Menu Title",
     },
     {
       title: 'Your Component Title',
       selected: false,
       icon: 'icon-name',
       type: 'link', // or 'sub', 'external', 'empty'
       path: '/path-to-route', // Specify the route path for link type
       dirchange: false, change the direction from right to left .
       active: false,
       badge: 'badge-class', // (optional) Add a badge to the menu item
       badgetxt: 'Badge Text', // (optional) Text to display in the badge
     }
```

--------------------------------

### Page Style Variations

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Allows selection of different page visual styles such as 'regular', 'classic', 'modern', and 'flat' using the `data-page-style` attribute.

```html
data-page-style="regular"

```

```html
data-page-style="classic"

```

```html
data-page-style="modern"

```

```html
data-page-style="flat"

```

--------------------------------

### React Basic Table Component

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Displays structured data in a clean and responsive table format using React and Bootstrap. It takes header definitions and data rows as input, rendering each row with specified cell content. Dependencies include a shared table component and data definitions.

```javascript
import SpkTablescomponent from "@/shared/@spk-reusable-components/tables-component";
import {Basictable} from "@/shared/data/tables/tablesdata";
    
    <SpkTablescomponent tableClass="text-nowrap" header={[{title:'Name'}, {title:'Created On'}, {title:'Number'}, {title:'Status'}]}>
    {Basictable.map((idx,index) => (
        <tr key={index}>
            <th scope="row">{idx.name}</th>
            <td>{idx.date}</td>
            <td>{idx.number}</td>
            <td><SpkBadge Customclass={`bg-${idx.color}-transparent`}>{idx.status}</SpkBadge></td>
        </tr>
    ))}
</SpkTablescomponent>
```

```typescript
interface Basic {
    id:number;
    name:string;
    date:string;
    number:string;
    status:string;
    color:string;
}
export const Basictable: Basic[] = [
    { id: 1, name: "Mark", date: "21,Dec 2021", number: "+1234-12340", status: "Completed", color: "primary" },
    { id: 2, name: "Monika", date: "29,April 2024", number: "+1523-12459", status: "Failed", color: "warning" },
    { id: 3, name: "Madina", date: "30,Nov 2024", number: "+1982-16234", status: "Successful", color: "success" },
    { id: 4, name: "Bhamako", date: "18,Mar 2024", number: "+1526-10729", status: "Pending", color: "secondary" },
]
```

--------------------------------

### React Empty Page Component Structure

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Illustrates a basic empty page component in React using react-bootstrap for layout. It includes SEO meta tags and a page header component. This serves as a template for creating new, simple pages within the Vyzor template.

```tsx
    import React, { Fragment } from "react";
    import { Card, Col, Row } from "react-bootstrap";
    import Seo from "../../../shared/layouts-components/seo/seo";
    import Pageheader from "../../../shared/layouts-components/pageheader/pageheader";

    interface EmptyProps {}
    const Empty:React.FC<EmptyProps> = () => {
        return (
            <Fragment>
                <!-- Page Header -->
                    <Seo title="Pages-Empty" />
                    <Pageheader title="Pages"  currentpage="Empty" activepage="Empty" />
                <!-- Page Header Close -->

                <!-- Start::row-1 -->
                    <Row>
                        <Col xl={12}>
                            <Card className="custom-card">
                                <Card.Body>
                                    <h6 className="mb-0">Empty Card</h6>
                                </Card.Body>
                            </Card>
                        </Col>
                    </Row>
                <!-- End::row-1 -->
            </Fragment>
        )
    };

    export default Empty;
```

--------------------------------

### React Bootstrap Badges Implementation

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Shows how to implement React Bootstrap Badges, which are small, customizable components for displaying labels or counters. The code maps over a data array to generate badges with different colors and styles. This requires the SpkBadge component and the Badgesdata array.

```jsx
import SpkBadge from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-badge";
    import {Badgesdata} from "@/shared/data/general/ui-elements/badgesdata";
    
        {Badgesdata.map((badge) => (
            <SpkBadge key={Math.random()} variant={badge.color} Customclass={`bg-${badge.color} ${badge.class}`}>{badge.heading}</SpkBadge>
        ))}

```

```typescript
interface badge {
        id: number
        heading: string
        color: string
        class: string
    }
    
    export const Badgesdata: badge[] = [
        { id: 1, heading: "Primary", color: "primary", class: "" },
        { id: 2, heading: "Primary1", color: "primary1", class: "" },
        { id: 3, heading: "Primary2", color: "primary2", class: "" },
        { id: 4, heading: "Primary3", color: "primary3", class: "" },
        { id: 5, heading: "Secondary", color: "secondary", class: "" },
        { id: 6, heading: "Success", color: "success", class: "" },
        { id: 7, heading: "Danger", color: "danger", class: "" },
        { id: 8, heading: "Warning", color: "warning", class: "" },
        { id: 9, heading: "Info", color: "info", class: "" },
        { id: 10, heading: "Light", color: "light", class: "text-dark" },
        { id: 11, heading: "Dark", color: "dark", class: "text-white" },
    ];
```

--------------------------------

### React Bootstrap List Group Implementation

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Illustrates the implementation of a React Bootstrap List Group. It uses the `SpkListgroup` component and maps over `BasicButtons` data to generate list items, each containing an avatar and text.

```jsx
 import SpkListgroup from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-listgroup";
    import {BasicButtons} from "@/shared/data/general/ui-elements/listgroupdata";
    
        <SpkListgroup as="ul">
            {BasicButtons.map((idx) => (
                    <ListGroup.Item as="li" key={Math.random()}>
                        <div className="d-flex align-items-center">
                            <span className="avatar avatar-sm">
                                <img src={idx.src} alt="img" />
                            </span>
                            <div className="ms-2 fw-semibold">
                                {idx.text}
                            </div>
                        </div>
                    </ListGroup.Item>
                ))}
    </SpkListgroup>


```

--------------------------------

### Loader Settings: Enable/Disable

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Controls the display of a loading indicator during page transitions or initial load. The `loader` attribute can be set to 'enable' or 'disable'.

```html
loader="enable"

```

```html
loader="disable"

```

--------------------------------

### React Bootstrap Card Component Implementation

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Displays content using React Bootstrap's versatile card component. It supports images, titles, body text, and footers, allowing for rich, structured UI elements. Requires React and React Bootstrap libraries.

```jsx
import SpkCard from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/reusable-cards/spk-basiccard";
                            
    <SpkCard titleClass="fw-medium" imgClass="card-img-top" footer="<span class='card-text'>Last updated 3 mins ago</span>"
        imgSrc="../../assets/images/media/media-18.jpg" title="Card title" bodyText=(
            <>
                <p className="card-text text-muted">
                    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.when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                <Link scroll={false} href="#!" className="btn btn-primary">Read More</Link>
            </>
        )
    />
```

--------------------------------

### Header Style Variations

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Allows customization of the header's appearance with styles including 'light', 'dark', 'color', 'gradient', and 'transparent', set using the `data-header-styles` attribute.

```html
data-header-styles="light"

```

```html
data-header-styles="dark"

```

```html
data-header-styles="color"

```

```html
data-header-styles="gradient"

```

```html
data-header-styles="transparent"

```

--------------------------------

### Theme Mode: Light vs. Dark

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Defines the attributes for switching between light and dark theme modes. These attributes control the `data-theme-mode`, `data-header-styles`, and `data-menu-styles` for visual appearance.

```html
data-theme-mode="light" data-header-styles="light" data-menu-styles="light"

```

```html
data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

```

--------------------------------

### Direction: LTR vs. RTL

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Specifies the text direction for the application, supporting both Left-to-Right (LTR) and Right-to-Left (RTL) layouts via the `dir` attribute.

```html
dir="ltr"

```

```html
dir="rtl"

```

--------------------------------

### React Bootstrap Carousel Implementation

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Demonstrates how to implement a React Bootstrap Carousel component using a custom SpkCarouselComponent and predefined carousel data. It requires the 'react-bootstrap' library and the shared data structure for carousel items.

```javascript
import SpkCarouselComponent from "@/shared/@spk-reusable-components/general-reusable/reusable-advancedui/spk-carousel";
    import {Carouseldata} from "@/shared/data/general/adavanec-ui/carouseldata";
    
        <SpkCarouselComponent items={Carouseldata}/>
    
```

```javascript
export const Carouseldata = [
    <div>
        <img src="../../assets/images/media/media-28.jpg" className="d-block w-100" alt="..." />
    </div>,
    <div>
        <img src="../../assets/images/media/media-31.jpg" className="d-block w-100" alt="..." />
    </div>,
    <div> 
        <img src="../../assets/images/media/media-29.jpg" className="d-block w-100" alt="..." />
    </div>
    ];
```

--------------------------------

### Layout: Vertical vs. Horizontal

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Configures the main layout structure of the application. Options include a vertical navigation or a horizontal navigation, controlled by the `data-nav-layout` attribute.

```html
data-nav-layout="vertical"

```

```html
data-nav-layout="horizontal" data-nav-style="menu-click"

```

--------------------------------

### React Bootstrap Progress Bar Data Structure

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Provides the data structure for React Bootstrap progress bars, containing an array of objects. Each object has an ID and a `data` property representing the completion percentage.

```javascript
 export const progressdata = [
    {id:1, data:0},
    {id:2, data:25},
    {id:3, data:50},
    {id:4, data:75},
    {id:5, data:100},
    ]

```

--------------------------------

### Menu Style Variations

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Defines the visual style of the menu, with options like 'light', 'dark', 'color', 'gradient', and 'transparent', controlled by the `data-menu-styles` attribute.

```html
data-menu-styles="light"

```

```html
data-menu-styles="dark"

```

```html
data-menu-styles="color"

```

```html
data-menu-styles="gradient"

```

```html
data-menu-styles="transparent"

```

--------------------------------

### React Bootstrap Alerts Component

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Provides pre-styled, customizable alert messages using Bootstrap's alert system integrated with React. Supports various alert styles (success, error, info, etc.) and dismissible functionality. Dependencies include a shared alert component and alert data definitions.

```javascript
import SpkAlerts from "@/shared/@spk-reusable-components/general-reusable/reusable-uielements/spk-alerts";
    import {Linkalerts} from "@/shared/data/general/ui-elements/alertsdata";

    {Linkalerts.map((idx) => (
        <SpkAlert variant={idx.class} key={Math.random()}>{idx.text1} 
            <Link href="#!" scroll={false} className="alert-link">{idx.text2}</Link>{idx.text3}
        </SpkAlert>
    ))}

```

```typescript
interface alert2 {
    text1: string
    text2: string
    text3: string
    class: string
}
export const Linkalerts: alert2[] = [
    { text1: "A simple primary alert with ", text2: "an example link. ", text3: "Give it a click if you like.", class: "primary" },
    { text1: "A simple secondary alert with", text2: "an example link. ", text3: "Give it a click if you like.", class: "secondary" },
    { text1: "A simple success alert with", text2: "an example link. ", text3: "Give it a click if you like.", class: "success" },
    { text1: "A simple danger alert with ", text2: "an example link. ", text3: "Give it a click if you like.", class: "danger" },
    { text1: "A simple warning alert with ", text2: "an example link. ", text3: "Give it a click if you like.", class: "warning" },
    { text1: "A simple info alert with", text2: "an example link. ", text3: "Give it a click if you like.", class: "info" },
    { text1: "A simple light alert with ", text2: "an example link. ", text3: "Give it a click if you like.", class: "light" },
    { text1: "A simple dark alert with", text2: "an example link. ", text3: "Give it a click if you like.", class: "dark" },

];

```

--------------------------------

### React Bootstrap Popovers Data Structure

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Defines the data structure for configuring React Bootstrap Popovers, specifically the `Defaultalerts` array. Each object specifies an ID, text label, and placement class for the popover.

```typescript
 interface defaultalerts {
    id: number
    text: string
    class: string
}
export const Defaultalerts: defaultalerts[] = [
    { id: 1, text: "Top", class: "top" },
    { id: 2, text: "Right", class: "auto" },
    { id: 3, text: "Bottom", class: "bottom" },
    { id: 4, text: "Left", class: "left" },
];   

```

--------------------------------

### React Bootstrap List Group Data Structure

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/react.html/index

Defines the data structure for React Bootstrap List Group items, presented as `BasicButtons`. Each object includes an ID, an image source (`src`), and associated text.

```typescript
 interface basicbtn {
    id: number
    src: string
    text: string
}

export const BasicButtons: basicbtn[] = [
    { id: 1, src: "../../assets/images/faces/1.jpg", text: "Isha Bella" },
    { id: 2, src: "../../assets/images/faces/3.jpg", text: "Elsa Urena" },
    { id: 3, src: "../../assets/images/faces/6.jpg", text: "Flora Mary" },
    { id: 4, src: "../../assets/images/faces/15.jpg", text: "Gatin Leo" },
    { id: 5, src: "../../assets/images/faces/13.jpg", text: "Raja Ryder" },
];


```
Tokens:
Raw