Velzon - Inertia + React & Laravel Admin & Dashboard Template

https://themesbrand.com/velzon/docs/react-laravel
Admin
Velzon is a premium, fully responsive admin and dashboard template built with Inertia, React,...
Tokens:32,980
Snippets:241
Trust Score:9.6
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Inertia React Adapter

Source: https://themesbrand.com/velzon/docs/react-laravel/inertiajs

Installs the necessary Inertia client-side adapter for React using npm. This is the first step in integrating Inertia with your React application.

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

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

### Install Inertia Laravel Server-side Adapter

Source: https://themesbrand.com/velzon/docs/react-laravel/inertiajs

Install the official InertiaJS server-side adapter for Laravel using Composer package manager. This is the first step in setting up Inertia for your Laravel application.

```bash
composer require inertiajs/inertia-laravel
```

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

### Install @vtaits/react-color-picker with Yarn

Source: https://themesbrand.com/velzon/docs/react-laravel/colorpicker

This command installs the specified color picker package using Yarn. Ensure you have Yarn installed and configured in your project.

```bash
yarn add @vtaits/react-color-picker --save
```

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

### Refer to Apexcharts Examples

Source: https://themesbrand.com/velzon/docs/react-laravel/apexcharts

This section provides file paths to various chart examples within the project structure. These examples demonstrate how to implement different chart types like Line, Area, Column, and Bar charts using React-ApexCharts.

```text
Refer to "/js/Pages/Charts/Apexcharts/LineCharts/LineCharts.tsx" for various Line chart examples.
Refer to "/js/Pages/Charts/Apexcharts/AreaCharts/AreaCharts.tsx" for various Area chart examples.
Refer to "/js/Pages/Charts/Apexcharts/ColumnCharts/ColumnCharts.tsx" for various Column chart examples.
Refer to "/js/Pages/Charts/Apexcharts/BarCharts/BarCharts.tsx" for various Bar chart examples.
Refer to "/js/Pages/Charts/Apexcharts/MixedCharts/MixedCharts.tsx" for various Mixed chart examples.
Refer to "/js/Pages/Charts/Apexcharts/TimelineCharts/TimelineCharts.tsx" for various Timeline chart examples.
Refer to "/js/Pages/Charts/Apexcharts/CandlestickChart/CandlestickChart.tsx" for various Candlestick chart examples.
Refer to "/js/Pages/Charts/Apexcharts/BoxplotCharts/BoxplotCharts.tsx" for various Boxplot chart examples.
Refer to "/js/Pages/Charts/Apexcharts/ScatterCharts/ScatterCharts.tsx" for various Bubble chart examples.
Refer to "/js/Pages/Charts/Apexcharts/ScatterCharts/ScatterCharts.tsx" for various Scatter chart examples.
Refer to "/js/Pages/Charts/Apexcharts/RangeAreaCharts/RangeAreaCharts.tsx" for various Range Area chart examples.
Refer to "/js/Pages/Charts/Apexcharts/FunnelCharts/FunnelCharts.tsx" for various Funnel chart examples.
Refer to "/js/Pages/Charts/Apexcharts/HeatmapCharts/HeatmapCharts.tsx" for various Heatmap chart examples.
Refer to "/js/Pages/Charts/Apexcharts/TreemapCharts/TreemapCharts.tsx" for various Treemap chart examples.
Refer to "/js/Pages/Charts/Apexcharts/PieCharts/PieCharts.tsx" for various Pie chart examples.
Refer to "/js/Pages/Charts/Apexcharts/RadialbarCharts/RadialbarCharts.tsx" for various Radialbar chart examples.
Refer to "/js/Pages/Charts/Apexcharts/RadarCharts/RadarCharts.tsx" for various Radar chart examples.
Refer to "/js/Pages/Charts/Apexcharts/PolarCharts/PolarCharts.tsx" for various Polar Area chart examples.
```

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

### Create Redux Slice with Redux-Toolkit

Source: https://themesbrand.com/velzon/docs/react-laravel/redux

Initialize a Redux slice using Redux-Toolkit's createSlice function with initial state and reducer actions. This example demonstrates a calendar module with getEvents and getCategories reducers. The slice is exported with actions and reducer to be used in the store configuration.

```TypeScript
import { createSlice } from "@reduxjs/toolkit";

export const initialState: any = {
    events: [],
};
                                        
const calendarSlice = createSlice({
    name: "calendar",
    initialState,
    reducers: {
    getEvents: (state: any, action: any) => {
        state.events = action.payload;
    },
                                        
    getCategories: (state: any, action: any) => {
        state.categories = action.payload;
    },
    }
})
export const { getEvents, getCategories } = calendarSlice.actions;
export default calendarSlice.reducer;
```

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

### Google Maps Types Configuration Example

Source: https://themesbrand.com/velzon/docs/react-laravel/google-maps

An example demonstrating how to configure and display a Google Map with specific initial center coordinates. This setup is foundational for customizing map types and views.

```javascript
<Map
      google={props.google}
      zoom={8}
      style={mapStyles}
      initialCenter={{ lat: 19.0760, lng: 72.8777 }}
  />
```

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

### Create Async Thunk Actions with Redux-Toolkit

Source: https://themesbrand.com/velzon/docs/react-laravel/redux

Define async thunk actions that dispatch reducer actions with data. This example shows two thunks that fetch events and categories data, dispatching them to the corresponding reducers. Error handling is included with try-catch blocks to manage async operation failures.

```TypeScript
import { calenderDefaultCategories, defaultevent, events } from "../../common/data";
import { getCategories, getEvents} from "./reducer";

 export const onGetEvents = () => async (dispatch: any) => {
    try {
      dispatch(getEvents(events));
    } catch (error) {
      return error;
    }
  }
   
  export const onGetCategories = () => async (dispatch: any) => {
    try {
      dispatch(getCategories(calenderDefaultCategories));
    } catch (error) {
      return error;
    }
  }
```

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

### Install Prismjs Package with Yarn

Source: https://themesbrand.com/velzon/docs/react-laravel/prismjs-highlight

Install the Prismjs package into your project using yarn package manager. This command adds Prismjs as a dependency to your project's package.json file.

```Bash
yarn add prismjs --save
```

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

### Install React FilePond Package

Source: https://themesbrand.com/velzon/docs/react-laravel/filepond

Add the react-filepond package to your project dependencies using yarn package manager. This installs the FilePond wrapper component and all required dependencies.

```Bash
yarn add react-filepond --save
```

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

### Install and Use Dropzone in React

Source: https://themesbrand.com/velzon/docs/react-laravel/dropzone

This snippet demonstrates how to install and use the Dropzone.js library within a React application for file uploads. It covers installing the 'react-dropzone' package, importing it, and implementing the drag-and-drop functionality with file preview and size formatting. Dependencies include React and its state management hooks.

```javascript
import Dropzone from "react-dropzone";

// ... inside your component

const [selectedFiles, setselectedFiles] = useState([]);

function handleAcceptedFiles(files) {
  files.map(file =>
    Object.assign(file, {
      preview: URL.createObjectURL(file),
      formattedSize: formatBytes(file.size),
    })
  );
  setselectedFiles(files);
}

/**
 * Formats the size
 */
function formatBytes(bytes, decimals = 2) {
  if (bytes === 0) return "0 Bytes";
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
}

<Dropzone
onDrop={acceptedFiles => {
handleAcceptedFiles(acceptedFiles);
}}>
{({ getRootProps, getInputProps }) => (
<div className="dropzone dz-clickable">
<div className="dz-message needsclick"
{...getRootProps()}
>
<div className="mb-3">
<i className="display-4 text-muted ri-upload-cloud-2-fill" />
</div>
<h4>Drop files here or click to upload.</h4>
</div>
</div>
)}
</Dropzone>
<div className="list-unstyled mb-0" id="file-previews">
{selectedFiles.map((f, i) => {
    return (
    <Card
        className="mt-1 mb-0 shadow-none border dz-processing dz-image-preview dz-success dz-complete"
        key={i + "-file"}
    >
        <div className="p-2">
        <Row className="align-items-center">
            <Col className="col-auto">
            <img
                data-dz-thumbnail=""
                height="80"
                className="avatar-sm rounded bg-light"
                alt={f.name}
                src={f.preview}
            />
            </Col>
            <Col>
            <Link
                to="#"
                className="text-muted font-weight-bold"
            >
                {f.name}
            </Link>
            <p className="mb-0">
                <strong>{f.formattedSize}</strong>
            </p>
            </Col>
        </Row>
        </div>
    </Card>
    );
})}


```

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

### Google Maps Overlays Example

Source: https://themesbrand.com/velzon/docs/react-laravel/google-maps

An example of how to render a Google Map with specified initial center coordinates and zoom level, suitable for displaying overlays. This sets up the basic map container before adding specific overlay elements.

```javascript
<Map
      google={props.google}
      zoom={8}
      style={mapStyles}
      initialCenter={{ lat: 54.5260, lng: 15.2551 }}
  />
```

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

### React App Setup with Redux and InertiaJS

Source: https://themesbrand.com/velzon/docs/react-laravel/laravel-react-structure

Configures the main React application entry point (app.tsx) for a Laravel project. It integrates Redux for state management and InertiaJS for seamless SPA experience. This setup handles routing, global state, and the application's root element rendering.

```tsx
import '../scss/themes.scss'; 

import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { Provider } from 'react-redux';
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./slices";
                                    
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
const store = configureStore({ reducer: rootReducer, devTools: true });

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
    setup({ el, App, props }) {
        const root = createRoot(el);
                                    
            root.render(
                <Provider store={store}>
                    <App {...props} />
                </Provider>
            );
        },
    progress: {
        color: '#4B5563',
    },
});
```

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

### Use Boxicons - HTML Example

Source: https://themesbrand.com/velzon/docs/react-laravel/icons

Example of how to use Boxicons by applying the 'bx' prefix followed by the specific icon class name to an `<i>` tag.

```html
<i className="bx bx-**"></i>

```

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

### CKEditor React Component Example

Source: https://themesbrand.com/velzon/docs/react-laravel/ckeditor

Example of integrating the CKEditor component into a React application. It shows how to configure the editor, handle data changes, and access editor instances.

```jsx
<CKEditor
    editor={ClassicEditor}
    data="<p>Hello from CKEditor 5!</p>"
    onReady={(editor) => {
    // You can store the "editor" and use when it is needed.                        
    }}
    onChange={(editor) => {
    editor.getData();
    }}
/>
```

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

### Flatpickr Basic Date Picker Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

A basic example of using the Flatpickr component to select a date. It demonstrates how to set the date format to 'd M, Y'.

```jsx
<Flatpickr
    className="form-control"
    options={{
    dateFormat: "d M, Y"
    }}
/>
```

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

### Install CKEditor Package

Source: https://themesbrand.com/velzon/docs/react-laravel/ckeditor

Instructions to add the CKEditor package to your project using Yarn. This includes the React adapter and the classic build of the editor.

```bash
yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic --save
```

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

### Install and Import google-maps-react

Source: https://themesbrand.com/velzon/docs/react-laravel/google-maps

This snippet shows how to install the google-maps-react package using Yarn and how to import the necessary components for using Google Maps in your React application. Ensure you have Node.js and Yarn installed.

```bash
yarn add google-maps-react --save
```

```javascript
import { GoogleApiWrapper, Map, Marker } from "google-maps-react";
```

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

### Install React-ApexCharts

Source: https://themesbrand.com/velzon/docs/react-laravel/apexcharts

Instructions for adding the react-apexcharts and apexcharts packages to your project using Yarn. This is essential for utilizing the charting library.

```bash
yarn add react-apexcharts apexcharts --save
```

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

### Initialize Inertia App with React

Source: https://themesbrand.com/velzon/docs/react-laravel/inertiajs

Boots the Inertia application using React. It initializes the client-side framework by resolving page components and rendering the root Inertia App component. Requires `react-dom/client`.

```typescript
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
    return pages[`./Pages/${name}.tsx`]
  },
  setup({ el, App, props }) {
    createRoot(el).render()
  },
})
```

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

### Add react-table Package

Source: https://themesbrand.com/velzon/docs/react-laravel/react-table

This command installs the 'react-table' package, a powerful library for handling and displaying large datasets in React applications. It is typically saved as a dependency in your project's package.json file.

```bash
yarn add react-table --save
```

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

### Flatpickr Basic Timepicker Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

A basic example of using Flatpickr as a time picker only. 'enableTime' is true, 'noCalendar' is true, and the format is 'H:i'.

```jsx
<Flatpickr
    className="form-control"
    options={{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    }}
/>
```

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

### Install RangeSlider Package with Yarn

Source: https://themesbrand.com/velzon/docs/react-laravel/rangeSlider

Install the react-rangeslider package using Yarn package manager. This command adds the dependency to your project's package.json file and installs it in the node_modules directory.

```bash
yarn add react-rangeslider --save
```

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

### Create Root Blade Template for Inertia

Source: https://themesbrand.com/velzon/docs/react-laravel/inertiajs

Set up the root template (app.blade.php) that serves as the entry point for your Inertia application. This template loads your CSS/JavaScript assets and contains the root div element where your React application boots. Include @vite, @inertiaHead, and @inertia directives.

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>
```

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

### Render Inertia Component from Laravel Controller

Source: https://themesbrand.com/velzon/docs/react-laravel/inertiajs

Use Inertia::render() method in Laravel controllers to render React components with server-side data. This example shows rendering an Event/Show component with filtered event data passed as props to the React frontend.

```php
use Inertia\Inertia;
    
class EventsController extends Controller
{
    public function show(Event $event)
    {
        return Inertia::render('Event/Show', [
            'event' => $event->only(
                'id',
                'title',
                'start_date',
                'description'
            ),
        ]);
    }
}
```

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

### Use Material Design Icons - HTML Example

Source: https://themesbrand.com/velzon/docs/react-laravel/icons

Shows the syntax for using Material Design Icons in your HTML, typically involving the 'mdi' prefix and specific icon names.

```html
<i className="mdi mdi-*-*"></i>

```

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

### Install React Rating with Yarn

Source: https://themesbrand.com/velzon/docs/react-laravel/ratings

Add the react-rating package to your project dependencies using Yarn package manager. This installation method is recommended for projects using Yarn as their dependency manager.

```bash
yarn add react-rating --save
```

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

### Step Line Chart Configuration in React

Source: https://themesbrand.com/velzon/docs/react-laravel/echarts

This code demonstrates how to create a step line chart in React using ECharts. It configures the chart with different 'step' types ('start', 'middle', 'end') for its series, allowing for distinct visual representations of data progression. The component utilizes the 'react-echarts' library and requires ECharts to be installed.

```javascript
const StepLineChart = () => {
      var option = {
  
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data: ['Step Start', 'Step Middle', 'Step End'],
              textStyle: { 
                  color: '#858d98',
              },
          },
          grid: {
              left: '0%',
              right: '0%',
              bottom: '0%',
              containLabel: true
          },
          toolbox: {
              feature: {
                  saveAsImage: {}
              }
          },
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisLine: {
                  lineStyle: {
                      color: '#858d98'
                  },
              },
          },
          yAxis: {
              type: 'value',
              axisLine: {
                  lineStyle: {
                      color: '#858d98'
                  },
              },
              splitLine: {
                  lineStyle: {
                      color: "rgba(133, 141, 152, 0.1)"
                  }
              }
          },
          textStyle: {
              fontFamily: 'Poppins, sans-serif'
          },
          color: ["#405189", "#0ab39c", "#f7b84b"],
          series: [{
              name: 'Step Start',
              type: 'line',
              step: 'start',
              data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
              name: 'Step Middle',
              type: 'line',
              step: 'middle',
              data: [220, 282, 201, 234, 290, 430, 410]
          },
          {
              name: 'Step End',
              type: 'line',
              step: 'end',
              data: [450, 432, 401, 454, 590, 530, 510]
          }
          ]
      };
  
      return (
          <React.Fragment>
              <ReactEcharts style={{ height: "350px" }} option={option} />
          </React.Fragment>
      )
  }
  
  

```

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

### Install and Import Dual Listbox in React

Source: https://themesbrand.com/velzon/docs/react-laravel/dualListBox

Instructions for installing the react-dual-listbox package using Yarn and importing its CSS and component. This component is controlled and requires state management for selected values.

```javascript
import "react-dual-listbox/lib/react-dual-listbox.css";
import DualListBox from "react-dual-listbox";
```

```bash
yarn add react-dual-listbox --save
```

```bash
yarn remove react-dual-listbox
```

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

### Publish InertiaJS Middleware with Artisan

Source: https://themesbrand.com/velzon/docs/react-laravel/inertiajs

Generate the HandleInertiaRequests middleware using Laravel's Artisan command. This middleware handles Inertia request processing and must be published before configuration.

```bash
php artisan inertia:middleware
```

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

### React Stacked Line Chart Example

Source: https://themesbrand.com/velzon/docs/react-laravel/echarts

This example shows how to create a stacked line chart in React. It includes configurations for tooltips, legends, grid, axes, multiple data series that are stacked, and overall styling. This chart is useful for visualizing contributions of different categories over time.

```javascript
const StackedLineChart = () => {
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
            textStyle: { 
                color: '#858d98',
            },
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
                lineStyle: {
                    color: '#858d98'
                },
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#858d98'
                },
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(133, 141, 152, 0.1)"
                }
            }
        },
        series: [{
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
        ],
        textStyle: {
            fontFamily: 'Poppins, sans-serif'
        },
        color: ["#405189", "#0ab39c", "#f7b84b", "#f06548", "#299cdb"]
    };
  
  
    return (
        <React.Fragment>
            <ReactEcharts style={{ height: "350px" }} option={option} />
        </React.Fragment>
    )
  }
  
```

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

### Install and Import Flatpickr in React

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

Instructions on how to add the react-flatpickr package to your project using yarn and how to import the Flatpickr component for use in your React components. Ensure the package is installed before attempting to import.

```javascript
import Flatpickr from "react-flatpickr";
```

```bash
yarn add react-flatpickr --save
```

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

### Use Feather Icons - React Example

Source: https://themesbrand.com/velzon/docs/react-laravel/icons

Example of rendering a Feather Icon component in React. You specify the desired icon using the 'icon' prop.

```javascript
<FeatherIcon icon="**"/>

```

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

### Install Swiper Slider Package (Yarn)

Source: https://themesbrand.com/velzon/docs/react-laravel/swiper-slider

Instructions to add the Swiper slider package to your project using Yarn. This is essential for enabling the slider functionality within your React application.

```bash
yarn add swiper --save
```

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

### Flatpickr Time Picker with Limits Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

This example restricts the selectable time range within the Flatpickr time picker. 'minTime' and 'maxTime' options are used along with 'enableTime' and 'noCalendar'.

```jsx
<Flatpickr
    className="form-control"
    options={{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    minTime: "16:00",
    maxTime: "22:30",
    }}
/>
```

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

### React Line Chart Example

Source: https://themesbrand.com/velzon/docs/react-laravel/echarts

This snippet demonstrates how to create a basic line chart in React. It configures chart options such as grid, axes, data series, and styling. Dependencies include React and a charting library (e.g., echarts).

```javascript
const LineChart = () => {
    var option = {
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '4%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
                lineStyle: {
                    color: '#858d98'
                },
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#858d98'
                },
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(133, 141, 152, 0.1)"
                }
            }
        },
        series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }],
        textStyle: {
            fontFamily: 'Poppins, sans-serif'
        },
        color: ["#0ab39c"]
    };
  
    return (
        <React.Fragment>
            <ReactEcharts style={{ height: "350px" }} option={option} />
        </React.Fragment>
    )
  }
  
```

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

### Use Line Awesome Icons - HTML Example

Source: https://themesbrand.com/velzon/docs/react-laravel/icons

Illustrates how to implement Line Awesome icons using the 'lab' prefix followed by the icon's specific class name within an `<i>` tag.

```html
<i className="lab la-*-*"></i>

```

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

### Configure Inertia Page Resolution (Vite vs Webpack)

Source: https://themesbrand.com/velzon/docs/react-laravel/inertiajs

Configures the Inertia page resolution callback, which determines how page components are loaded. Provides separate implementations for Vite and Webpack bundlers, with Vite using dynamic import and Webpack using require.

```javascript
// Vite
resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
    return pages[`./Pages/${name}.tsx`]
},
```

```javascript
// Webpack
resolve: name => require(`./Pages/${name}`)
```

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

### Flatpickr Date and Time Picker Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

This example shows how to configure Flatpickr to allow selection of both date and time. The date format is set to 'Y-m-d H:i', enabling time selection.

```jsx
<Flatpickr
    className="form-control"
    options={{
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    }}
/>
```

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

### Import Simplebar React Component

Source: https://themesbrand.com/velzon/docs/react-laravel/simplebar

Demonstrates how to import the Simplebar React component after installation. This is necessary to use SimpleBar for custom scrollbars in your React application.

```javascript
import SimpleBar from 'simplebar-react';
```

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

### Google Maps Markers Example

Source: https://themesbrand.com/velzon/docs/react-laravel/google-maps

Demonstrates how to add multiple markers to a Google Map using the `Marker` component from `google-maps-react`. Each `Marker` can be positioned independently using latitude and longitude coordinates.

```javascript
<Map
      google={props.google}
      zoom={8}
      style={mapStyles}
      initialCenter={{ lat: 34.134117, lng: -118.321495 }}
  >
      <Marker position={{ lat: 48.00, lng: -122.00 }} />
      <Marker position={{ lat: 34.134117, lng: -118.321495 }} />
      <Marker position={{ lat: 32.995049, lng: -111.536324 }} />
      <Marker position={{ lat: 39.877586, lng: -79.640617 }} />
      <Marker position={{ lat: 39.877586, lng: -79.640617 }} />
  </Map>
```

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

### Install and Import react-select in React

Source: https://themesbrand.com/velzon/docs/react-laravel/choices

This snippet shows how to add the 'react-select' package to your project using Yarn and how to import the Select component. 'react-select' is a flexible and feature-rich select input control for ReactJS.

```bash
yarn add react-select --save
```

```javascript
import Select from "react-select";
```

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

### Use Remix Icons - HTML Example

Source: https://themesbrand.com/velzon/docs/react-laravel/icons

Demonstrates how to render Remix Icons using HTML `<i>` tags with the appropriate class names. You can use either the 'line' or 'fill' variants.

```html
<i className="ri-home-line"></i> or <i className="ri-home-fill"></i>

```

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

### Install Cleave.js for React Input Masking

Source: https://themesbrand.com/velzon/docs/react-laravel/input-mask

Instructions for adding the Cleave.js library to a React project for input formatting. This package is essential for implementing dynamic input masks in forms.

```javascript
import Cleave from "cleave.js/react";
import "cleave.js/dist/addons/cleave-phone.in";
```

```bash
yarn add cleave.js --save
```

```bash
yarn remove cleave.js ( you can remove package by removing specific package from package.json )
```

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

### Install Simplebar React Package

Source: https://themesbrand.com/velzon/docs/react-laravel/simplebar

This snippet shows how to add the Simplebar React package to your project using Yarn. SimpleBar is used to replace default browser scrollbars with custom CSS-styled ones.

```bash
yarn add simplebar-react --save
```

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

### Flatpickr Inline Timepicker Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

Shows how to display the Flatpickr time picker directly on the page. The 'inline' option is set to true, along with 'enableTime' and 'noCalendar'.

```jsx
<Flatpickr
    className="form-control"
    options={{
    enableTime: true,
    noCalendar: true,
    inline: true,
    }}
/>
```

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

### Flatpickr Default Date Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

Shows how to set a default date when the Flatpickr component is initialized. The 'defaultDate' option is used to pre-populate the date input.

```jsx
<Flatpickr
    className="form-control"
    options={{
    dateFormat: "Y-m-d",
    defaultDate: ["2022-01-20"]
    }}
/>
```

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

### React Stacked Area Chart Example

Source: https://themesbrand.com/velzon/docs/react-laravel/echarts

This example defines a stacked area chart in React. It includes configurations for tooltips, grid, axes, and multiple data series that are stacked and styled as areas. This chart type is effective for showing how different parts contribute to a whole over time.

```javascript
const StackedAreaChart = () => {
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',

```

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

### Create New Page with Layout in React

Source: https://themesbrand.com/velzon/docs/react-laravel/create-new-page

Example of creating a new page with a layout, breadcrumbs, and meta tags using React and Inertia.js. It requires the BreadCrumb component and specifies layout configuration.

```tsx
import { Link, Head } from "@inertiajs/react";
import Layout from "@/Layouts";

// import breadcrumb
import BreadCrumb from "@/Components/Common/BreadCrumb";  

 const newPage = () => {
        return (
            <>
                <Head title=" New Page | Velzon - React Admin & Dashboard Template" />  //for meta title
                    <div className="page-content">
                        <Container fluid>
                            <BreadCrumb title="New Page" pageTitle="New Page" />
                        
                                //write Html code or structure

                        </Container>
                    </div>
            </>
        );
    }
newPage.layout = (page:any) => <Layout children={page} />
export default newPage;
```

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

### Install Chart.js and React-ChartJS-2 Packages

Source: https://themesbrand.com/velzon/docs/react-laravel/chartjs

Add the react-chartjs-2 and chart.js packages to your project dependencies using yarn package manager. These packages provide Chart.js charting functionality integrated with React components.

```bash
yarn add react-chartjs-2 chart.js --save
```

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

### Flatpickr Inline Calendar Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

Shows how to display the Flatpickr calendar directly on the page without needing to click an input field. The 'inline' option is set to true.

```jsx
<Flatpickr
    className="form-control"
    options={{
    inline: true,
    dateFormat: "Y-m-d"
    }}
/>
```

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

### Register HandleInertiaRequests Middleware

Source: https://themesbrand.com/velzon/docs/react-laravel/inertiajs

Register the HandleInertiaRequests middleware in the App\Http\Kernel class within the web middleware group. This middleware must be the last item in the web group to properly intercept all requests.

```php
'web' => [
        // ...
        \App\Http\Middleware\HandleInertiaRequests::class,
    ],
```

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

### Initialize Layout State in Redux Toolkit

Source: https://themesbrand.com/velzon/docs/react-laravel/detached

This code defines the initial state for the layout in a Redux Toolkit setup using Thunk. It specifies various layout properties such as type, mode, sidebar settings, and preloader status. Ensure to use corresponding constants from `js/constants/layout.ts` when updating object properties.

```typescript
export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.SEMIBOX,
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    leftSidebarType: LAYOUT_SIDEBAR_TYPES.DARK,
    layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID,
    layoutPositionType: LAYOUT_POSITION_TYPES.FIXED,
    topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT,
    leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT,
    leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DETACHED,
    leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
    preloader: PERLOADER_TYPES.DISABLE,
    sidebarVisibilitytype: SIDEBAR_VISIBILITY_TYPES.SHOW
 };
```

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

### Define Controller Function for New Route in Laravel

Source: https://themesbrand.com/velzon/docs/react-laravel/create-new-page

Example of defining a controller function in Laravel to handle a new route. This function uses Inertia.js to render a React component, specified by its path.

```php
public function test_func(){
    return Inertia::render('NewPage/index');
}

```

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

### Create New Page without Layout in React

Source: https://themesbrand.com/velzon/docs/react-laravel/create-new-page

Example of creating a new page without a layout using React and Inertia.js. This approach is suitable for standalone pages that do not require breadcrumbs or a predefined layout structure.

```tsx
import React from 'react';
import { Head } from "@inertiajs/react";
import GuestLayout from "@Layouts/GuestLayout";
                                                    
const newPage = () => {
return (
        <React.Fragment>
            <Head title=" New Page | Velzon - React Admin & Dashboard Template" />  //for meta title
                <GuestLayout>
                    //write Html code or structure
                </GuestLayout>
            </React.Fragment>
    )
}
                                                    
export default newPage;
```

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

### Google Maps Street View Panorama Example

Source: https://themesbrand.com/velzon/docs/react-laravel/google-maps

This code snippet shows the basic structure for embedding a Google Maps Street View panorama. It configures the map with initial center and zoom, ready to display a street-level view.

```javascript
<Map
    google={props.google}
    zoom={8}
    style={mapStyles}
    initialCenter={{ lat: 8.7832, lng: 34.5085 }}
  />
```

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

### Specify Root Element ID for Inertia App

Source: https://themesbrand.com/velzon/docs/react-laravel/inertiajs

Customizes the root element ID for the Inertia application if it differs from the default 'app'. This allows Inertia to find and mount to the correct element in your HTML.

```javascript
createInertiaApp({
    id: 'my-app',
    // ...
})
```

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

### React Area Chart Example

Source: https://themesbrand.com/velzon/docs/react-laravel/echarts

This code snippet illustrates how to generate an area chart in React. It includes configurations for grid, axes, data series with the `areaStyle` property enabled, and general styling. Area charts are suitable for showing trends and volume over time.

```javascript
const AreaChart = () => {
    var option = {
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '4%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
                lineStyle: {
                    color: '#858d98'
                },
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#858d98'
                },
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(133, 141, 152, 0.1)"
                }
            }
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
        }],
        textStyle: {
            fontFamily: 'Poppins, sans-serif'
        },
        color: "#0ab39c",
        backgroundColor: "#f3f6f9",
    };
  
    return (
        <React.Fragment>
            <ReactEcharts style={{ height: "350px" }} option={option} />
        </React.Fragment>
    )
  }
  
```

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

### Flatpickr Date Range Selection Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

This example sets up Flatpickr for selecting a range of dates. The 'mode' is set to 'range' and the date format is 'Y-m-d'.

```jsx
<Flatpickr
    className="form-control"
    options={{
    mode: "range",
    dateFormat: "Y-m-d"
    }}
/>
```

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

### Flatpickr Disabling Dates Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

This example demonstrates how to disable specific dates from being selected in the Flatpickr calendar. An array of dates and a Date object are provided to the 'disable' option.

```jsx
<Flatpickr
    className="form-control"
    options={{
    disable: ["2022-01-30", "2022-02-21", "2022-03-08", new Date(2025, 4, 9)],
    dateFormat: "Y-m-d",
    }}
/>
```

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

### Available Layout Theme Types

Source: https://themesbrand.com/velzon/docs/react-laravel/themesetup

A list of predefined layout theme types available in the Velzon theme. These constants represent different visual styles and structural configurations that can be applied to the theme.

```typescript
layoutThemeTypes.DEFAULT
layoutThemeTypes.SAAS
layoutThemeTypes.MATERIAL
layoutThemeTypes.GALAXY
layoutThemeTypes.CORPORATE
layoutThemeTypes.MINIMAL
layoutThemeTypes.CREATIVE
layoutThemeTypes.MODERN
layoutThemeTypes.INTERACTIVE
layoutThemeTypes.CLASSIC
layoutThemeTypes.VINTAGE
```

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

### Import Prismjs Package in React

Source: https://themesbrand.com/velzon/docs/react-laravel/prismjs-highlight

Import the Prismjs library into your React component or application file. This statement makes the Prism syntax highlighter available for use in your application for code highlighting functionality.

```JavaScript
import Prism from "prismjs";
```

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

### Flatpickr MinDate and MaxDate Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

This example configures Flatpickr to restrict date selection within a specific range. 'minDate' is set to 'today' and 'maxDate' is set to 14 days from the current date.

```jsx
<Flatpickr
    className="form-control"
    options={{
    minDate: "today",
    maxDate: new Date().fp_incr(14)
    }}
/>
```

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

### Import FilePond CSS Styles

Source: https://themesbrand.com/velzon/docs/react-laravel/filepond

Import FilePond core styles and image preview plugin CSS to enable the file upload component styling. These imports must be included before using the FilePond component to ensure proper styling.

```JavaScript
// Import FilePond styles
import 'filepond/dist/filepond.min.css';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
```

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

### Initial State Configuration for Layouts (TypeScript)

Source: https://themesbrand.com/velzon/docs/react-laravel/horizontal

Defines the initial state for layout configurations in TypeScript. This object holds various layout properties like type, mode, sidebar settings, width, position, topbar theme, and preloader. Users should modify these values as needed, referencing constants from `js/constants/layout.ts`.

```typescript
export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.HORIZONTAL,
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    leftSidebarType: LAYOUT_SIDEBAR_TYPES.DARK,
    layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID,
    layoutPositionType: LAYOUT_POSITION_TYPES.FIXED,
    topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT,
    leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT,
    leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT,
    leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
    preloader: PERLOADER_TYPES.DISABLE,
    sidebarVisibilitytype: SIDEBAR_VISIBILITY_TYPES.SHOW
 };
```

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

### Initialize Layout State with Theme Options

Source: https://themesbrand.com/velzon/docs/react-laravel/two-column

Define the initial Redux state for layout configuration in Velzon. This TypeScript interface includes all theme options such as layout type, mode, sidebar styling, and visibility settings. Modify values in the INIT_STATE variable located in js/slices/layouts/reducer.ts to customize the theme behavior.

```typescript
export const initialState: LayoutState = {
  layoutType: LAYOUT_TYPES.TWOCOLUMN,
  layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
  leftSidebarType: LAYOUT_SIDEBAR_TYPES.DARK,
  layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID,
  layoutPositionType: LAYOUT_POSITION_TYPES.FIXED,
  topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT,
  leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT,
  leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT,
  leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
  preloader: PERLOADER_TYPES.DISABLE,
  sidebarVisibilitytype: SIDEBAR_VISIBILITY_TYPES.SHOW
};
```

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

### Flatpickr Preloading Time Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

Demonstrates how to set a default time value for the Flatpickr time picker. The 'defaultDate' option is used to preload the time.

```jsx
<Flatpickr
    className="form-control"
    options={{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    defaultDate: "13:45"
    }}
/>
```

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

### Add New Route in Laravel

Source: https://themesbrand.com/velzon/docs/react-laravel/create-new-page

Demonstrates how to declare a new route in Laravel using the `web.php` file. It shows how to group routes under middleware and associate them with a specific controller method.

```php
Route::middleware('auth')->group(function () {
    Route::controller(VelzonRoutesController::class)->group(function () {
        Route::get("/test-page", "test_func");
        // other routes
    });
}); 

```

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

### Flatpickr 24-hour Time Picker Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

Configures Flatpickr to display time in a 24-hour format. 'enableTime' and 'noCalendar' are true, 'dateFormat' is 'H:i', and 'time_24hr' is set to true.

```jsx
<Flatpickr
    className="form-control"
    options={{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    time_24hr: true
    }}
/>
```

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

### Flatpickr Multiple Dates Selection Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

Configures Flatpickr to allow the user to select multiple dates. The 'mode' option is set to 'multiple' and the date format is 'Y-m-d'.

```jsx
<Flatpickr
    className="form-control"
    options={{
    mode: "multiple",
    dateFormat: "Y-m-d"
    }}
/>
```

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

### Initial State for Layout Reducer (Redux-Toolkit)

Source: https://themesbrand.com/velzon/docs/react-laravel/vertical

This code defines the initial state for the layout reducer using TypeScript with Redux-Toolkit and Thunk. It specifies various layout properties such as `layoutType`, `layoutModeType`, `leftSidebarType`, and more, using constants defined elsewhere.

```typescript
export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.VERTICAL,
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    leftSidebarType: LAYOUT_SIDEBAR_TYPES.DARK,
    layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID,
    layoutPositionType: LAYOUT_POSITION_TYPES.FIXED,
    topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT,
    leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT,
    leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT,
    leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
    preloader: PERLOADER_TYPES.DISABLE,
    sidebarVisibilitytype: SIDEBAR_VISIBILITY_TYPES.SHOW
 };
```

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

### Initialize i18next for Multi-Language

Source: https://themesbrand.com/velzon/docs/react-laravel/multi-language

This TypeScript code snippet demonstrates initializing the i18next library for multi-language support. It loads German translations, sets the default language based on local storage, and configures fallback languages and interpolation settings.

```typescript
import i18n from "i18next";
import translationGr from "./locales/gr.json"; 
      
const resources = {
          gr: {
              translation: translationGr
          }
      };

const language = localStorage.getItem("I18N_LANGUAGE");
      if (!language) {
        localStorage.setItem("I18N_LANGUAGE", "en");  // replace "en" to "gr".
      }

i18n
        .use(detector)
        .use(initReactI18next) // passes i18n down to react-i18next
        .init({
        resources,
        lng: localStorage.getItem("I18N_LANGUAGE") || "en",  // replace "en" to "gr" to set the gr language as default.
        fallbackLng: "en", // use en if detected lng is not available

        keySeparator: false, // we do not use keys in form messages.welcome

        interpolation: {
          escapeValue: false, // react already safes from xss
        },
      });

```

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

### Import React FilePond Component

Source: https://themesbrand.com/velzon/docs/react-laravel/filepond

Import the FilePond component and registerPlugin function from the react-filepond package. These are required to create and configure file upload instances in your React application.

```JavaScript
import { FilePond, registerPlugin } from 'react-filepond';
```

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

### Flatpickr Human-Friendly Dates Example

Source: https://themesbrand.com/velzon/docs/react-laravel/flatpickr

Demonstrates configuring Flatpickr to display dates in a human-readable format. The 'altFormat' option is set to 'F j, Y' for display, while 'dateFormat' remains 'Y-m-d'.

```jsx
<Flatpickr
    className="form-control"
    options={{
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
    }}
/>
```

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

### Read-Only Rating with Multiple Stars

Source: https://themesbrand.com/velzon/docs/react-laravel/ratings

Display a read-only rating component with unlimited number of stars (16 stars in example). The readonly property prevents user interaction while allowing display of fractional ratings.

```jsx
<Rating
  stop={16}
  emptySymbol="mdi mdi-star-outline text-muted fa-1x"
  fullSymbol="mdi mdi-star text-warning"
  initialRating={4.5}
  readonly
/>
```

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

### Configure Default Layout Initialization State (TypeScript)

Source: https://themesbrand.com/velzon/docs/react-laravel/layout

Sets the initial state for the application's layout configuration in `js/slices/layouts/reducer.ts`. It defines the default values for `layoutThemeType` and `layoutThemeColorType`, which control the overall theme and color scheme of the application. Other initial state properties are assumed to be configured elsewhere.

```typescript
export const initialState: LayoutState = {
    layoutThemeType: LAYOUT_THEME_TYPES.DEFAULT,
    layoutThemeColorType: LAYOUT_THEME_COLOR_TYPES.DEFAULT,
    };
```

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

### Add German Language JSON

Source: https://themesbrand.com/velzon/docs/react-laravel/multi-language

This snippet shows how to add German language translations by creating a JSON file. It includes example key-value pairs for menu items, orders, customers, and sellers. Ensure all translatable strings are included.

```json
{
        "Menu": "Speisekarte",
        "Orders": "Aufträge",
        "Customers": "Kunden",
        "Sellers": "Verkäufer"
}; 

```
Tokens:
Raw