Velzon Next

https://themesbrand.com/velzon/docs/next/
Admin
Velzon Next is a premium, fully responsive admin and dashboard template built with Next.js, React,...
Tokens:68,817
Snippets:275
Trust Score:9.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Run Project Locally for Development

Source: https://themesbrand.com/velzon/docs/next/getting-started

Starts the development server, watches for code changes, and makes the project accessible at http://localhost:3000.

```Bash
yarn dev
```

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

### Install Dependencies with Yarn

Source: https://themesbrand.com/velzon/docs/next/getting-started

Installs all the required project dependencies into the node_modules folder using Yarn.

```Bash
yarn install
yarn
```

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

### Run Project Locally from Build Folder

Source: https://themesbrand.com/velzon/docs/next/getting-started

Starts a local server from the build folder, accessible at http://localhost:3000.

```Bash
yarn start
```

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

### Build Project for Production

Source: https://themesbrand.com/velzon/docs/next/getting-started

Generates a /build directory containing all the production-ready files for the project.

```Bash
yarn build
```

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

### SCSS Customization Guidance

Source: https://themesbrand.com/velzon/docs/next/getting-started

Provides guidance on SCSS file modifications, recommending the use of custom.scss to avoid conflicts with theme updates.

```SCSS
// Suggestion: Do not change any scss files from the src/assets/scss/custom.scss folder.
// Use custom.scss for your custom styles to avoid breaking changes with theme updates.
```

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

### Velzon API Integration Setup

Source: https://themesbrand.com/velzon/docs/next/index

This section covers the setup for integrating with various APIs. It guides developers on how to connect Velzon with external services and data sources.

```JavaScript
// Example of fetching data from an API using fetch:
// async function fetchData() {
//   try {
//     const response = await fetch('/api/data');
//     const data = await response.json();
//     console.log(data);
//   } catch (error) {
//     console.error('Error fetching data:', error);
//   }
// }
```

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

### Install React Dropzone

Source: https://themesbrand.com/velzon/docs/next/dropzone

Instructions on how to install the react-dropzone package using yarn.

```bash
yarn add react-dropzone --save
```

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

### Redux Toolkit Setup

Source: https://themesbrand.com/velzon/docs/next/sources

Configures Redux Toolkit for efficient state management in React applications. Includes store configuration and basic reducer setup.

```JavaScript
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});
```

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

### Implement FakeBackend API Call

Source: https://themesbrand.com/velzon/docs/next/fake-backend

Define the API client and implement the data fetching function using the APIClient. This function makes a GET request to the specified URL.

```typescript
import * as url from "./url_helper";
//  Api 
import { APIClient } from "./api_helper";

const api = new APIClient();

export const getData = () => api.get(url.GET_DATA, null);
```

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

### Simulate API Responses with axios-mock-adapter

Source: https://themesbrand.com/velzon/docs/next/fake-backend

Utilize axios-mock-adapter to simulate HTTP responses for the FakeBackend. This involves mocking GET requests to specific URLs and returning predefined data.

```javascript
import MockAdapter from "axios-mock-adapter";                                
import * as url from "../url_helpers"
import axios from "axios";

import { data } from "Common/data";
       
const fakeBackend = () => {

    mock.onGet(url.GET_DATA).reply(() => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (data) {
              // Passing fake JSON data as response
              resolve([200, data]);
            } else {
                reject([400, "Cannot get contact list"]);
            }
          });
        });
    });

}
export default fakeBackend;
```

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

### Apexcharts Pie Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Pie chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/PieCharts/PieCharts.tsx" for various Pie chart examples.
```

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

### Apexcharts Bar Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Bar chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/BarCharts/BarCharts.tsx" for various Bar chart examples.
```

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

### Apexcharts Timeline Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Timeline chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/TimelineCharts/TimelineCharts.tsx" for various Timeline chart examples.
```

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

### Line Awesome Usage Example

Source: https://themesbrand.com/velzon/docs/next/icons

Example of how to use Line Awesome icons in your HTML by applying specific class names to an `<i>` tag.

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

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

### Dropzone File Upload Example

Source: https://themesbrand.com/velzon/docs/next/dropzone

A React component example demonstrating how to use Dropzone for file uploads. It includes functions for handling accepted files, formatting file sizes, and rendering file previews.

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

// ... other imports and component setup

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

// Inside your component's return statement:
<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>
    );
  })}
</div>
```

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

### Apexcharts Line Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Line chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/LineCharts/LineCharts.tsx" for various Line chart examples.
```

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

### Next.js Social Authentication Setup

Source: https://themesbrand.com/velzon/docs/next/social

Code examples for handling social login in a Next.js application. Includes formik validation, dispatching social login thunks, and triggering social responses for Facebook and Google.

```javascript
import { socialLogin } from "@/slices/thunks";

const validation = useFormik({
    enableReinitialize: true,
    initialValues: {
        email: userLogin.email || "admin@themesbrand.com" || '',
        password: userLogin.password || "123456" || '',
    },
    validationSchema: Yup.object({
        email: Yup.string().required("Please Enter Your Email"),
        password: Yup.string().required("Please Enter Your Password"),
    }),
    onSubmit: (values) => {
        dispatch(loginUser(values, props.router.navigate));
    }
});

const signIn = type => {
    dispatch(socialLogin(type, props.router.navigate));
};

// For Facebook and Google authentication
const socialResponse = type => {
    signIn(type);
};

<Link
    to="#"
    className="btn btn-primary btn-icon me-1"
    onClick={e => {
        e.preventDefault();
        socialResponse("facebook");
}}
>
    <i className="ri-facebook-fill fs-16" />
</Link>
```

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

### Apexcharts Radar Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Radar chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/RadarCharts/RadarCharts.tsx" for various Radar chart examples.
```

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

### Boxicons Usage Example

Source: https://themesbrand.com/velzon/docs/next/icons

Example of how to use Boxicons in your HTML by applying specific class names to an `<i>` tag.

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

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

### Material Design Icons Usage Example

Source: https://themesbrand.com/velzon/docs/next/icons

Example of how to use Material Design Icons in your HTML by applying specific class names to an `<i>` tag.

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

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

### Install React-ApexCharts

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Instructions to add the react-apexcharts and apexcharts packages to your project using Yarn.

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

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

### Apexcharts Bubble Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Bubble chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/BubbleChart/BubbleChart.tsx" for various Bubble chart examples.
```

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

### Apexcharts Scatter Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Scatter chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/ScatterCharts/ScatterCharts.tsx" for various Scatter chart examples.
```

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

### Velzon Next.js API Helper Configuration (TypeScript)

Source: https://themesbrand.com/velzon/docs/next/api-integration

This snippet shows the Axios setup for making server API calls in Velzon Next.js, including methods for GET, PUT, POST, DELETE, interceptors, and token management. It's located in `src/helpers/api_helper.ts`.

```typescript
import axios from "axios";

const API_URL = process.env.NEXT_PUBLIC_API_URL || "/api";

const axiosInstance = axios.create({
  baseURL: API_URL,
});

// Add a request interceptor
axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("authToken");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Add a response interceptor
axiosInstance.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response && error.response.status === 401) {
      // Handle unauthorized access, e.g., redirect to login
      localStorage.removeItem("authToken");
    }
    return Promise.reject(error);
  }
);

export const get = (url: string, params?: any) => {
  return axiosInstance.get(url, { params });
};

export const post = (url: string, data?: any) => {
  return axiosInstance.post(url, data);
};

export const put = (url: string, data?: any) => {
  return axiosInstance.put(url, data);
};

export const deleteRequest = (url: string) => {
  return axiosInstance.delete(url);
};

export default axiosInstance;

```

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

### Apexcharts Column Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Column chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/ColumnCharts/ColumnCharts.tsx" for various Column chart examples.
```

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

### Apexcharts Heatmap Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Heatmap chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/HeatmapCharts/HeatmapCharts.tsx" for various Heatmap chart examples.
```

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

### ESLint Configuration

Source: https://themesbrand.com/velzon/docs/next/sources

Configuration guide for ESLint, a pluggable linting utility for JavaScript and JSX. Helps maintain code quality and consistency.

```JSON
{
  "parser": "@babel/eslint-parser",
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "react"
  ],
  "rules": {
    "react/prop-types": "off",
    "no-unused-vars": "warn"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}
```

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

### Remix Icons Usage Example

Source: https://themesbrand.com/velzon/docs/next/icons

Example of how to use Remix Icons in your HTML by applying specific class names to an `<i>` tag.

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

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

### Apexcharts Area Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Area chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/AreaCharts/AreaCharts.tsx" for various Area chart examples.
```

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

### Apexcharts Mixed Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Mixed chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/MixedCharts/MixedCharts.tsx" for various Mixed chart examples.
```

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

### Apexcharts Polararea Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Polararea chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/PolarCharts/PolarCharts.tsx" for various Polar chart examples.
```

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

### Apexcharts Radialbar Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Radialbar chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/RadialbarCharts/RadialbarCharts.tsx" for various Radialbar chart examples.
```

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

### Install React Flatpickr

Source: https://themesbrand.com/velzon/docs/next/flatpickr

Instructions to add the react-flatpickr package to your project using yarn.

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

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

### Install Prismjs for Velzon Next TS

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

Instructions on how to install the Prismjs package using Yarn for the Velzon Next TS project. This package is used for syntax highlighting.

```bash
yarn add prismjs --save
```

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

### Apexcharts Boxplot Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Boxplot chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/BoxplotCharts/BoxplotCharts.tsx" for various Boxplot chart examples.
```

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

### Apexcharts Treemap Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Treemap chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/TreemapCharts/TreemapCharts.tsx" for various Treemap chart examples.
```

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

### Install Filepond

Source: https://themesbrand.com/velzon/docs/next/filepond

Installs the 'react-filepond' package using Yarn. This command adds the necessary library to your project's dependencies, enabling you to use Filepond for file uploads.

```shell
yarn add react-filepond --save
```

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

### Apexcharts Candlestick Chart Example

Source: https://themesbrand.com/velzon/docs/next/apexcharts

Reference to the source file for Candlestick chart examples using Apexcharts in Velzon Next TS.

```typescript
You can refer "src/pages/Charts/Apexcharts/CandlestickChart/CandlestickChart.tsx" for various Candlestick chart examples.
```

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

### Install and Import Dual Listbox in Next.js

Source: https://themesbrand.com/velzon/docs/next/dualListBox

This snippet shows how to install the react-dual-listbox package using yarn and import its CSS file for use in a Next.js application.

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

```javascript
import DualListBox from "react-dual-listbox";
```

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

```bash
yarn remove react-dual-listbox ( you can remove package by removing specific package from package.json )
```

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

### Jest and Testing Library Setup

Source: https://themesbrand.com/velzon/docs/next/sources

Sets up Jest and React Testing Library for unit and integration testing of React components. Includes basic DOM testing utilities.

```JavaScript
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import MyComponent from './MyComponent';

test('renders MyComponent', () => {
  render(<MyComponent />);
  const element = screen.getByText(/hello/i);
  expect(element).toBeInTheDocument();
});
```

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

### Velzon Fake Backend Setup

Source: https://themesbrand.com/velzon/docs/next/index

Velzon includes guidance on setting up a fake backend for development purposes. This allows developers to simulate API responses and test frontend functionality without a live backend.

```JavaScript
// Example using Mock Service Worker (MSW) for fake backend:
// import { setupWorker, rest } from 'msw';
// 
// const worker = setupWorker(
//   rest.get('/api/users', (req, res, ctx) => {
//     return res(ctx.json([{ id: 1, name: 'John Doe' }]));
//   })
// );
// 
// worker.start();
```

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

### Define URL Helper for API Endpoints

Source: https://themesbrand.com/velzon/docs/next/fake-backend

Create a URL helper file to manage API endpoint URLs. This centralizes URL definitions and makes them easily accessible.

```javascript
export const GET_DATA = "/invoice";
```

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

### Velzon Next.js Fake Backend Initialization (JavaScript)

Source: https://themesbrand.com/velzon/docs/next/api-integration

This snippet illustrates how the fake backend might be initialized or wrapped in Velzon Next.js, likely within a provider component. This setup is for demonstration purposes and can be removed for real API integrations. Found in `src/utils/fakeBackendInit.ts` or similar.

```javascript
import { useEffect } from 'react';
import fakeBackend from './fakeBackend'; // Assuming fakeBackend is imported from a local file

const FakeBackendInitializer = ({ children }) => {
  useEffect(() => {
    // Initialize fake backend if the environment variable is set
    if (process.env.NEXT_PUBLIC_DEFAULTAUTH === 'fake') {
      fakeBackend.init();
    }

    // Cleanup function to remove fake backend if necessary
    return () => {
      if (process.env.NEXT_PUBLIC_DEFAULTAUTH === 'fake') {
        fakeBackend.reset();
      }
    };
  }, []);

  return children;
};

export default FakeBackendInitializer;

```

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

### Define JSON Data for FakeBackend

Source: https://themesbrand.com/velzon/docs/next/fake-backend

Create JSON data files to be used by the FakeBackend. These files typically reside in a common data directory and export the data array.

```javascript
const data = [
    {
    id: "1",
    orderdate: "22 Feb, 2023",
    customer: "Deondre Fahey",
    name: "Ratke Group",
    paymethod: "COD",
    },
    {
    id: "2",
    orderdate: "14 Feb, 2023",
    customer: "Warren Anderson",
    name: "Zibra Fashion",
    paymethod: "Mastercard",
    },
]
    
export { data }
```

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

### Axios and Axios Mock Adapter Usage

Source: https://themesbrand.com/velzon/docs/next/sources

Demonstrates using Axios for HTTP requests and Axios Mock Adapter for mocking API responses during development and testing.

```JavaScript
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

// Mocking API calls
const mock = new MockAdapter(axios);
mock.onGet('/api/data').reply(200, {
  message: 'Success!'
});

// Making a request
axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

```

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

### Velzon SCSS Entry Point

Source: https://themesbrand.com/velzon/docs/next/folder-structure

The primary SCSS file for the Velzon template, responsible for importing all other SCSS files. This file is typically imported into the application's main JavaScript or TypeScript file.

```SCSS
src/assets/scss/themes.scss
```

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

### Install and Import React-Select

Source: https://themesbrand.com/velzon/docs/next/choices

Instructions for adding the react-select package to your project using yarn and importing the Select component for use in your React application.

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

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

```bash
yarn remove react-select ( you can remove package by removing specific package from package.json )
```

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

### Export All Thunks from Main Thunk File

Source: https://themesbrand.com/velzon/docs/next/fake-backend

Consolidate all asynchronous thunks into a single export file. This simplifies importing and using thunks in React components.

```javascript
export { getData } from "./Data/thunk"
```

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

### Feather Icons React Usage Example

Source: https://themesbrand.com/velzon/docs/next/icons

Example of how to use the FeatherIcon React component to display Feather Icons by passing the icon name as a prop.

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

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

### Install Swiper Slider Package

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

This command uses the Yarn package manager to install the Swiper slider library and save it as a dependency in the project.

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

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

### Install Color Picker Package (Yarn)

Source: https://themesbrand.com/velzon/docs/next/colorpicker

Provides the command to install the Color picker package using Yarn, a popular JavaScript package manager.

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

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

### Configure Redux Slice for Data Management

Source: https://themesbrand.com/velzon/docs/next/fake-backend

Set up a Redux slice using createSlice from Redux Toolkit to manage the application's data state. This includes defining initial state and handling asynchronous actions like fetching data.

```typescript
import { createSlice } from "@reduxjs/toolkit";
import { getData } from "./thunk"

export const initialState ={
    dataList: [],
}

const EcommerceSlice = createSlice({
    name : "Data",
    initialState,
    reducers: {},

    extraReducers: (builder) => {

        //data
        builder.addCase(getData.fulfilled, (state: any, action: any) => {
            state.dataList = action.payload;
        });
        builder.addCase(getData.rejected, (state: any, action: any) => {
            state.error = action.payload.error || null;
        });
    },
})
```

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

### Install and Import Quill JS CSS

Source: https://themesbrand.com/velzon/docs/next/quilljs

This snippet shows how to install the Quill JS package using yarn and import its 'snow' theme CSS for use in a React application.

```bash
yarn add quill --save
```

```css
import "quill/dist/quill.snow.css";
```

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

### Pie Chart Example

Source: https://themesbrand.com/velzon/docs/next/echarts

This code snippet demonstrates how to create a Pie Chart using ReactEcharts. It includes sample data for different categories like 'Visit', 'Inquiry', 'Order', 'Click', and 'Show', along with text styling for the chart.

```jsx
const PieChart = () => {
    var option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            data: ['Visit', 'Inquiry', 'Order', 'Click', 'Show'],
            orient: 'vertical',
            top: 'center',
            left: 'right',
        },
        series: [
            {
                name: 'Data',
                type: 'pie',
                selectedMode: 'single',
                radius: ['60%', '70%'],
                label: {
                    position: 'inner',
                    fontSize: 12,
                    color: '#fff'
                },
                data: [
                    {
                        value: 60,
                        name: 'Visit'
                    },
                    {
                        value: 40,
                        name: 'Inquiry'
                    },
                    {
                        value: 20,
                        name: 'Order'
                    },
                    {
                        value: 80,
                        name: 'Click'
                    },
                    {
                        value: 100,
                        name: 'Show'
                    }
                ]
            }
        ],
        textStyle: {
            fontFamily: 'Poppins, sans-serif',
        },
    };
    return (
        <React.Fragment>
            <ReactEcharts style={{ height: "350px" }} option={option} />
        </React.Fragment>
    )
}
```

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

### Install and Import Cleave.js in Next.js

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

This snippet shows how to install the Cleave.js package using yarn and how to import the necessary components and addons for React in a Next.js application. It includes importing the main Cleave component and a specific phone number addon.

```javascript
<!-- cleave.js -->
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 )
```

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

### Configure Velzon Next TS Theme Options

Source: https://themesbrand.com/velzon/docs/next/themesetup

This code snippet defines the initial state for the Velzon Next TS layout configuration. It includes properties for layout type, theme type, color scheme, mode, sidebar settings, width, position, and preloader.

```TypeScript
export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.VERTICAL,
    layoutThemeType: LAYOUT_THEME.DEFAULT,
    layoutThemeColorType: LAYOUT_THEME_COLOR.DEFAULT,
    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
};
```

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

### Heatmap Chart Example

Source: https://themesbrand.com/velzon/docs/next/echarts

This code snippet provides an example of a Heatmap Chart using ReactEcharts, visualizing daily step counts. It includes a helper function `getVirtulData` to generate random data for a given year and configures the calendar and visual map components for the heatmap.

```javascript
function getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate(+year + 1 + '-01-01');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time < end; time += dayTime) {
      data.push([
        echarts.format.formatTime('yyyy-MM-dd', time),
        Math.floor(Math.random() * 10000)
      ]);
    }
    return data;
  }
```

```jsx
const HeatmapChart = () => {
    var option = {
        title: {
          top: 30,
          left: 'center',
          text: 'Daily Step Count'
        },
        tooltip: {},
        visualMap: {
          min: 0,
          max: 10000,
          type: 'piecewise',
          orient: 'horizontal',
          left: 'center',
          top: 65
        },
        calendar: {
          top: 120,
          left: 30,
          right: 30,
          cellSize: ['auto', 13],
          range: '2016',
          itemStyle: {
            borderWidth: 0.5
          },
          yearLabel: { show: false }
        },
        series: {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: getVirtulData('2016')
        }
      };
    return (
        <React.Fragment>
            <ReactEcharts style={{ height: "350px" }} option={option} />
        </React.Fragment>
    )
}
```

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

### Install React Table with Yarn

Source: https://themesbrand.com/velzon/docs/next/reacttable

This snippet shows the command to add the react-table package to your project using Yarn. It's a necessary step before you can use the library.

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

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

### Prism.js Syntax Highlighting

Source: https://themesbrand.com/velzon/docs/next/sources

Implements Prism.js for syntax highlighting of code blocks within the application, improving code readability.

```HTML
<pre><code class="language-javascript">
function greet(name) {
  console.log(`Hello, ${name}!`);
}
</code></pre>
```

```JavaScript
import Prism from 'prismjs';
import 'prismjs/themes/prism-okaidia.css'; // Or any other theme

// Call Prism.highlightAll() after your component mounts or content is loaded
Prism.highlightAll();
```

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

### Activate Fake Backend in Next TS

Source: https://themesbrand.com/velzon/docs/next/fake-backend

This code snippet demonstrates how to activate the fake backend in a Next.js TypeScript project. It involves importing the fakeBackend helper function and calling it to initialize the fake backend service.

```TypeScript
import fakeBackend from "src/helpers/AuthType/fakeBackend.ts";

// Activating fake backend

fakeBackend();
```
Tokens:
Raw