### Install and Use React Select

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

This snippet guides through the installation of React Select and shows how to implement a customizable dropdown component. It includes example data for the options and component configuration.

```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" }
];
```

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

### Install and Use React Select

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

Provides instructions for installing and using React Select, a flexible dropdown component. It includes an example of dynamic import and how to configure options and styling.

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

```javascript
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]]}/>
                            

```

```javascript
export const Selectoption1 = [
    { 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 Maps Installation and Usage

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

Provides instructions for installing react-leaflet and leaflet, along with a React code example for integrating a map. It requires dynamic import for the SpkLeaflet component and CSS import for Leaflet's styling. The example shows how to set the map's position, zoom level, and other properties.

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

```React
const SpkLeaflet = dynamic(() => import('@/shared/@spk-reusable-components/reusable-plugins/spk-leaflet'), { ssr: false });
//
const position = [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 and Use React Select

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

Installs the React Select library and shows how to implement a customizable dropdown/select input. It includes dynamic import for server-side rendering and an example of defining select options.

```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]]}/>
                            

```

```jsx
export const Selectoption1 = [
    { 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" }
];
```

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

### Install and Use React SunEditor

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

Installs the React SunEditor library and provides a basic example of its usage within a React component. It also shows how to import the necessary CSS for the editor.

```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 Grid.js

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

Installs the React Grid.js library and provides an example of how to use it to display data in a table. It supports sorting, filtering, and pagination. Data can be provided as a static array or a Promise.

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

```react
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"]
];


export const Data1 = (): Promise => {
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 Project Dependencies with NPM

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/svelte-laravel

These commands are used to install project dependencies. 'npm install' downloads packages listed in package.json. 'npm run build' compiles assets for production. 'npm run dev' starts a development server with hot-reloading.

```shell
npm install

```

```shell
npm run build

```

```shell
npm run dev

```

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

### Install Dependencies for Starter-kit

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

Installs project dependencies for the Starter-kit using npm or yarn. This command ensures all necessary libraries and packages are downloaded for the project.

```bash
npm install
(or)
yarn install
```

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

### Install Project Dependencies

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

Installs all the necessary project dependencies listed in the `package.json` file. This command should be run after cloning the repository or when setting up the project for the first time.

```bash
npm install
```

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

### Initialize FlatPickr for Date Selection

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

This code provides an example of using FlatPickr, a JavaScript library for date and time pickers. It includes the HTML input field, the FlatPickr CSS, and the JavaScript initialization. The example shows a basic setup for selecting a date.

```html
<div class="form-group">
    <div class="input-group">
        <div class="input-group-text text-muted"> <i class="ri-calendar-line"></i> </div>
        <input type="text" class="form-control" id="date" placeholder="Choose date">
    </div>
</div>
```

```css
<!-- FlatPickr CSS -->
    <link rel="stylesheet" href="../assets/libs/flatpickr/flatpickr.min.css">
```

```javascript
<!-- Date & Time Picker JS -->
    <script src="../assets/libs/flatpickr/flatpickr.min.js">

    /* To choose date */
    flatpickr("#date", {});

```

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

### Install Inertia React Adapter

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

Installs the Inertia.js client-side adapter for React. This is the first step in setting up your client-side framework with Inertia.

```bash
npm install @inertiajs/react
```

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

### Install Project Packages (npm or yarn)

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

Installs all necessary project dependencies. Use 'npm install' if you are using npm, or 'yarn install' if you are using yarn. Ensure you delete the appropriate lock file (package-lock.json for npm, yarn.lock for yarn) if switching package managers.

```shell
npm install
```

```shell
yarn install
```

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

### Install Composer Dependencies

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

This command installs all the necessary project dependencies defined in the composer.json file. It is crucial for setting up a CodeIgniter project after cloning or downloading it. Ensure Composer is installed and accessible in your system's PATH.

```bash
composer install
```

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

### Check Python Installation (Command Line)

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

This command verifies if Python is installed on the system and displays its version. It's a crucial step after Python installation to ensure it's set up correctly.

```bash
python --version
```

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

### Install Project Dependencies

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

This command installs all the necessary dependencies for the Vyzor project into the `node_modules` folder. Ensure you have Node.js installed and have navigated to your project directory before running this command.

```bash
 npm install
```

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

### Install React-Apexcharts

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

Commands to install ApexCharts and its React wrapper. React-ApexCharts enables the creation of interactive, responsive charts within a React application.

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

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

### Install Gulp Globally or as a Dev Dependency

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

Instructions for installing Gulp, a JavaScript task runner. It can be installed globally for system-wide use or as a development dependency within a specific project.

```bash
npm install -g gulp
```

```bash
npm install --save-dev gulp
```

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

### Install Laravel Project Dependencies

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/vue-laravel

Commands to install project dependencies using Composer and npm. 'composer install' is for PHP dependencies, and 'npm install' is for Node.js dependencies.

```bash
composer install
npm install
```

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

### Basic React Router Configuration in main.tsx

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

This code snippet illustrates the fundamental setup for React Router in a single-page application. It shows how to import necessary components like BrowserRouter, Routes, and Route from 'react-router-dom'. The example demonstrates rendering a main App component and defining basic routes for different dashboard views (Sales, Analytics) within a Suspense boundary for lazy loading. It assumes base URL is configured via environment variables.

```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>
)
```

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

### Install Pigeon Maps with npm

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

This command installs the pigeon-maps package using npm. Ensure you have Node.js and npm installed on your system.

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

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

### Install Esbuild Globally

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

Installs the Esbuild bundler globally on your system, making its commands available from any directory. This is a prerequisite for using Esbuild in your project.

```bash
npm install -g esbuild
```

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

### Install and Use React Grid.js

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

Installs the gridjs-react and gridjs packages and demonstrates how to use the SpkGridjstables component with provided data. It supports sorting, filtering, and pagination.

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

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

```react
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 Project Dependencies (Pip)

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

This command installs all the Python packages listed in the 'requirements.txt' file. It ensures that all necessary libraries for the Django project are installed within the activated virtual environment.

```bash
pip install -r requirements.txt
```

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

### Install Inertia Svelte Adapter (NPM)

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/svelte-laravel

Installs the Inertia.js client-side adapter for Svelte using npm. This enables Svelte components to communicate with the Inertia backend.

```bash
npm install @inertiajs/svelte
```

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

### Install Inertia.js Vue 3 Adapter

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/vue-laravel

Installs the Inertia.js client-side adapter for Vue 3 using npm. This is the first step in setting up Inertia for a Vue project.

```bash
npm install @inertiajs/vue3
                                            

```

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

### Start Laravel Development Server

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/svelte-laravel

This command starts the built-in development server for a Laravel application. It provides a local URL to access the project in a web browser.

```shell
php artisan serve

```

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

### Install and Configure Firebase in Next.js

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

Instructions for installing the Firebase package in a Next.js project and configuring the Firebase SDK with API credentials. This setup enables the use of Firebase services like Firestore and Authentication.

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

```typescript
    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 };
                
```

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

### Start Symfony Development Server

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

Launches the built-in PHP development server for the Symfony project. This command serves the project from the 'public' directory on localhost.

```bash
php -S 127.0.0.1:8000 -t public
```

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

### Install and Use React Toastify for Notifications in Next.js

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

This section covers the installation of the react-toastify package for Next.js applications. It provides a code example demonstrating how to trigger a toast notification using a button click, integrating with a reusable SpkToastify component and specifying its position.

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

```javascript
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 and Use React Grid.js for Data Tables in Next.js

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

This snippet demonstrates how to install the gridjs-react and gridjs libraries for Next.js projects. It includes an example of integrating a SpkGridjstables component with predefined data, specifying columns for display. The data can be static or fetched asynchronously.

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

```javascript
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 and Use React DatePicker

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

Installs and shows how to integrate React DatePicker for date and time selection. It involves setting up state for dates and a handler function for changes, along with CSS import.

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

```javascript
import SpkDatepickr from "@/shared/@spk-reusable-components/reusable-plugins/spk-datepicker"
                            
 const [dates, setDates] = useState({});
 const handleDateChange = (key, date) => {
     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 Select in Next.js

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

This snippet shows how to install the React Select library using npm and integrate it into a Next.js application using dynamic import for server-side rendering. It includes an example of defining select options and rendering a customizable multi-select dropdown.

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

```javascript
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]]}/>
                            

```

```javascript
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" }
];
```

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

### Install and Use React DatePicker

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

This snippet provides instructions for installing the React Datepicker library and demonstrates its usage within a React component. It includes state management for selected dates and basic styling.

```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
<!-- Swiper Css -->
@import 'react-datepicker/dist/react-datepicker.css';>
```

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

### Install and Use React DatePicker in Next.js

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

This section covers the installation of the React DatePicker library via npm and its implementation within a Next.js application. It includes a functional example demonstrating date state management and rendering the date picker component with custom input group styling. The necessary CSS import is also provided.

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

```javascript
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
<!-- Swiper Css -->
@import 'react-datepicker/dist/react-datepicker.css';>
```

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

### Serve Laravel Project

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

This command starts the local development server for a Laravel application. It allows you to access your project through a web browser at the specified URL.

```bash
php artisan serve
```

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

### Change Menu Icons (React)

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

Guide on how to replace default menu icons with custom SVG icons in a React component. It shows how to modify the icon definitions within the sidebar component, referencing an example of replacing Iconscout icons with Feather icons.

```react
Before: (Iconscout Icons)

export const Dashboardicon =  <svg xmlns="http://www.w3.org/2000/svg" className="side-menu__icon" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M133.66,34.34a8,8,0,0,0-11.32,0L40,116.69V216h64V152h48v64h64V116.69Z" opacity="0.2"/><line x1="16" y1="216" x2="240" y2="216" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16"/><polyline points="152 216 152 152 104 152 104 216" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16"/><line x1="40" y1="116.69" x2="40" y2="216" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16"/><line x1="216" y1="216" x2="216" y2="116.69" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16"/><path d="M24,132.69l98.34-98.35a8,8,0,0,1,11.32,0L232,132.69" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="16"/></svg>

export const MENUITEMS = [
{
    menutitle: "MAIN", 
    Items: [
        { id: 2,icon: Dashboardicon, title: "Dashboards", type: "sub", active: false,  dirchange: false, selected: false }
    ]
}]
                                
After: (Feather Icons)
const Dashboardicon = Modify the SVG here according to your needs.

export const MenuItems = [
{
    menutitle: "MAIN", 
    Items: [
        { id: 2,icon: Dashboardicon, title: "Dashboards", type: "sub", active: false,  dirchange: false, selected: false }
    ]
}]
                        
                    
                
```

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

### Initialize Full Calendar Component

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

This snippet shows how to set up the Full Calendar plugin. It requires Moment.js, Fullcalendar JS, and a custom JavaScript file for initialization. The HTML includes a div with the ID 'calendar2' to render the calendar. The provided JS includes necessary script tags and a placeholder for custom calendar logic.

```html
<div id='calendar2'></div>
```

```javascript
<!-- Moment JS -->
<script src="../assets/libs/moment/min/moment.min.js"></script>

<!-- Fullcalendar JS -->
<script src="../assets/libs/fullcalendar/index.global.min.js"></script>
<script src="../assets/js/fullcalendar.js"></script>
```

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

### Check Pip Installation (Command Line)

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

This command checks if the Pip package installer is installed and displays its version. Pip is automatically installed with Python and is used to manage project dependencies.

```bash
pip --version
```

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

### React File Structure Example

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

Demonstrates a basic React file structure for a page component within the Vyzor template. It utilizes Bootstrap components for layout and includes SEO and page header components. The `Empty.layout` property assigns a main layout to the page.

```jsx
    
    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";
    import MainLayout from "@/Layouts/layout";
    const Empty = () => {
        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>
        )
    };
    // Assign layout
    Empty.layout = (page) => <MainLayout>{page}</MainLayout>;
    export default Empty;


```

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

### Generate Nuxt Pages

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

This snippet demonstrates how to generate new pages within a Nuxt application using the `nuxt generate` command. It shows examples for creating a static page and a dynamic route page. Ensure you have Nuxt CLI installed and are in your project's root directory.

```bash
npx nuxi add page about
npx nuxi add page "category/[id]"
```

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

### Install Node.js Project Dependencies

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

This command installs the necessary Node.js packages and their dependencies as defined in the 'package.json' file. This is typically used for front-end development tools, build processes, or JavaScript-based libraries required by the project.

```bash
npm install 
```

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

### Build Production File with esbuild

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

This command initiates the development build process using esbuild. It generates the `dist/` directory, starts a local development server, and watches for file changes in the `src/` folder to automatically update the output.

```bash
 npm run dev
```

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

### Install and Use React DatePicker

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

Installs the React Datepicker library and demonstrates its integration into a React form. It includes state management for selected dates and the necessary CSS import.

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

```jsx
import SpkDatepickr from "@/shared/@spk-reusable-components/reusable-plugins/spk-datepicker"
                            
const [dates, setDates] = useState({});
const handleDateChange = (key, date) => {
    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';
```

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

### Run Flask Development Server

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

This command starts the Flask development server, typically running the main application file (e.g., 'app.py'). The server will then be accessible via a local URL, usually `http://127.0.0.1:5000`, allowing developers to test and debug their web application.

```bash
python app.py 
```

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

### Install and Use React Grid.js Table

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

Installs the React Grid.js library and demonstrates its basic usage by rendering a table with provided data and column headers. It supports inline editing, sorting, and filtering.

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

```react
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"]
];

export const Data1 = (): Promise => {
  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";
```

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

### Initialize Inertia App with Svelte

Source: https://preview.sprukomarket.com/html/bootstrap/vyzor/documentation/html/svelte-laravel

Boots the Inertia application on the client-side using Svelte. It defines how Svelte components are resolved from the './Pages' directory and how the main application component is mounted to the DOM element.

```javascript
// app.js

import './bootstrap';
import { createInertiaApp } from '@inertiajs/svelte'
import { mount } from 'svelte'
import '../css/app.scss'
import '../css/scss/switcher.scss'
createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
    return pages[`./Pages/${name}.svelte`]
  },
  setup({ el, App, props }) {
    mount(App, { target: el, props })
  },
})

// 🔥 Global click handler to prevent scroll for dummy anchors
document.addEventListener('click', (e) => {
  const target = e.target.closest('a');
  if (!target) return;

  const href = target.getAttribute('href');
  if (href === '#' || href === '#!') {
    e.preventDefault();
  }
});

```

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

### Install Ng Select Component

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

Installs the Ng Select component using npm. This package provides a flexible and customizable dropdown/select input for Angular applications. Ensure you have Node.js and npm installed.

```bash
npm i @ng-select/ng-select
```

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

### Install Angularx Flatpickr (NPM)

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

Installs the angularx-flatpickr package, which is an Angular wrapper for the Flatpickr date picker library. Note: The provided command installs 'react-datepicker' which is incorrect for Angular. The correct command should be 'npm i angularx-flatpickr'.

```bash
npm i react-datepicker

```

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

### Install Angular Material

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

Installs the core Angular Material library using npm. This package provides a set of high-quality UI components for Angular applications, including data tables. Ensure Node.js and npm are installed.

```bash
npm i @angular/material 
```

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

### Install Dependencies with npm Force

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

Forces npm to install dependencies, useful when encountering installation errors. Use with caution as it may lead to conflicts.

```bash
npm install --force

```