Cuba Next

https://next-cuba-doc-pixelstrapthemes.vercel.app
Admin
Cuba Next is a pure Next.js TypeScript admin theme with Bootstrap 5 and SCSS, featuring customizable...
Tokens:19,733
Snippets:192
Trust Score:7.8
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Start Project (npm)

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/faq

This snippet shows the necessary commands to install project dependencies and start the development server. It is crucial to run 'npm install' before 'npm start' to avoid initial errors.

```shell
npm install

```

```shell
npm start

```

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

### Install and Use React-Dropzone-Uploader Component

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

This example shows how to install and use the react-dropzone-uploader library for creating file upload interfaces. It includes installation steps, CSS import, and a React component setup with functions for configuring upload parameters, handling status changes, and submitting files.

```bash
npm i react-dropzone-uploader
```

```javascript
import Dropzone from 'react-dropzone-uploader';
import 'react-dropzone-uploader/dist/styles.css';
 
const Dropzones = () => {

// specify upload params and url for your files
const getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } }

// called every time a file's `status` changes
const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) }


// receives array of files that are done uploading when submit button is clicked
const handleSubmit = (files) => { console.log(files.map(f => f.meta)) }

return (
    <Dropzone
        getUploadParams={getUploadParams}
        onChangeStatus={handleChangeStatus}
        onSubmit={handleSubmit}
        accept="image/*,audio/*,video/*"
        multiple={false}
        canCancel={false}
    />
)
}

```

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

### Install and Use Reactour for Guided Tours

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

Details the installation and basic usage of the reactour library for implementing guided tours in a React application. It includes code for defining tour steps, initializing the tour, and handling its closure. The uninstall command is also provided.

```bash
npm i reactour
```

```javascript
import Tour from 'reactour';

const steps = [
  {
    selector: '.step1',
    content: 'This is Profile image',
  },
]

const Tours = (props) =>  {
  const [opentour,setopentour] = useState(true)
  const closeTour = () => {
        setopentour(false);
      };
  return(
    <Tour steps={steps} isOpen={opentour} onRequestClose={closeTour} />
    <div className="avatar">
      <Media body className="step1" alt="" src={require("../../assets/images/user/7.jpg")} data-intro="This is Profile image" />
    </div>
    )
}

```

```bash
npm uninstall reactour
```

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

### Install and Use SweetAlert2 for Alerts

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

This section details how to install the sweetalert2 library and implement basic alert functionality within a React component. It includes the installation command and a React component example that triggers a simple 'Hello world!' alert upon clicking a button.

```bash
npm i sweetalert2
```

```javascript
import SweetAlert from 'sweetalert2';

const Sweetalert = (props) => {
  return (
        <CardBody  className="btn-showcase">
        <Button color="primary" className="sweet-1" onClick={() => SweetAlert.fire({title:"Hello world!"})}>Basic</Button>
        <CardBody>
  )
}
```

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

### Install and Use React-Image-Crop Component

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

This snippet demonstrates how to install and integrate the react-image-crop library for image cropping functionality. It includes the installation command, necessary CSS import, and a basic React component setup for the cropper with state management for crop parameters.

```bash
npm i react-image-crop
```

```javascript
import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";

const Example = () => {
  const [crop, setCrop] = useState({ unit: '%', width: 30, aspect: 16 / 9 });
  return(
  <ReactCrop
        src={src}
        crop={crop}
        onImageLoaded={onImageLoaded}
        onComplete={onCropComplete}
        onChange={onCropChange}
  />
  )
}

```

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

### Install and Use React-Range Slider Component

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

Demonstrates the installation of the react-range library and its usage for creating a range slider. The example shows how to set up the slider with minimum, maximum, and step values, and how to handle the slider's state.

```bash
npm i react-range
```

```javascript
import React from 'react';
import InputRange from 'react-range';

const RangeSlider = () => {

const STEP = 1;
const MIN = 0;
const MAX = 20;
const [values1, setValues1] = useState([10]);

return (
  <Range
        values={values1}
        step={STEP}
        min={MIN}
        max={MAX}
        onChange={(values1) => setValues1(values1)}
        renderTrack={({ props, children }) => (
          <div
            onMouseDown={props.onMouseDown}
            onTouchStart={props.onTouchStart}
            style={{
              ...props.style,
              height: "36px",
              display: "flex",
              width: "100%"
            }}
          >
          <output style={{ marginTop: "30px" }}>
              0
              </output>
              <div
              ref={props.ref}
              style={{
                height: "5px",
                width: "100%",
                borderRadius: "4px",
                background: getTrackBackground({
                  values: values1,
                  colors: ["#7366ff", "#ccc"],
                  min: MIN,
                  max: MAX
                }),
                alignSelf: "center"
              }}
              >
              {children}
              </div>
              <output style={{ marginTop: "30px" }}>
              20
              </output>
              </div>
        )}
        renderThumb={({ props, isDragged }) => (
          <div
            {...props}
            style={{
              ...props.style,
              height: "42px",
              width: "42px",
              borderRadius: "4px",
              backgroundColor: "#FFF",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              boxShadow: "0px 2px 6px #AAA"
            }}
            >
            <div
              style={{
                height: "16px",
                width: "5px",
                backgroundColor: isDragged ? "#7366ff" : "#CCC"
              }}
            />
          </div>
        )}
      />
)
}

```

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

### Install and Use React Stepzilla for Stepper Components

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

Provides instructions for installing and using the react-stepzilla library to create multi-step components. The example shows how to define steps and integrate them into a React component. Uninstall command is also included.

```bash
npm i react-stepzilla
```

```javascript
/* StepsComponent.js */
export const  DefaultStep = (props) =>  {
  return (
          <Row className="u-steps row">
            <Col sm="4" className="u-step"><span className="u-step-number">1</span>
              <div className="u-step-desc"><span className="u-step-title">Shopping</span>
                <p>Choose what you want</p>
              </div>
            </Col>
            <Col sm="4" className="u-step current"><span className="u-step-number">2</span>
              <div className="u-step-desc"><span className="u-step-title">Billing</span>
                <p>Pay for the bill</p>
              </div>
            </Col>
            <Col sm="4" className="u-step"><span className="u-step-number">3</span>
              <div className="u-step-desc"><span className="u-step-title">Getting</span>
                <p>Waiting for the goods</p>
              </div>
            </Col>
        </Row>
  );
}

import StepZilla from 'react-stepzilla';
import {DefaultStep} from "./StepsComponent";
const defaultdtep =[{name: 'Step 1',component:<DefaultStep/>}]
const Steps = () => {
  return (
    <CardBody>
      <StepZilla steps={defaultdtep} showSteps={false}  showNavigation={false}/>
    </CardBody>
    )
}

```

```bash
npm uninstall react-stepzilla
```

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

### Install and Use React Rating Component

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

Explains how to install and use the react-rating library for implementing star-based rating systems. The example shows basic initialization and how to handle rating changes. The command to uninstall the package is also included.

```bash
npm i react-rating
```

```javascript
import Rating from 'react-rating'
const [rating,setRating] = useState(5);
}
const Ratingss = (props) => {
  return (
          <Rating
            initialRating={rating}
            emptySymbol="fa fa-star-o fa-2x"
            fullSymbol="fa fa-star fa-2x"
            onChange={(rate) => setRating(rate)} 
          />
  );
}

```

```bash
npm uninstall react-rating
```

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

### Install and Use ApexCharts in Next.js

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/charts

Instructions for installing the 'react-apexcharts' package and a basic example of rendering an area chart. This requires the 'react-apexcharts' library and provides configuration for chart series, options, and data. The output is an area chart component.

```bash
npm i react-apexcharts
```

```javascript
/* Basic ApexData.jsx */
export const apexchartsexample = {
  series: [{
    name: 'series1',
    data: [31, 40, 28, 51, 42, 109, 100]
  }, {
    name: 'series2',
    data: [11, 32, 45, 32, 34, 52, 41]
  }],
  options: {
    chart: {
      height: 350,
      type: 'area'
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth'
    },
    xaxis: {
      type: 'datetime',
      categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
    },
    tooltip: {
      x: {
        format: 'dd/MM/yy HH:mm'
      },
    },
    colors:["#7366ff", "#f73164"]
  },
};
import Chart from 'react-apexcharts'
import {apexchartsexample} from './ApexData'
const Apexcharts = (props)  => {
    return (
      <CardBody>
        <Chart options={apexchartsexample.options} series={apexchartsexample.series} type="area" height={350}  />
      </CardBody>
    );
  }
}
```

```bash
npm uninstall react-apexcharts
```

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

### Install and Use Google Charts in Next.js

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/charts

Instructions for installing the 'react-google-charts' package and a basic example of rendering a PieChart. This requires the 'react-google-charts' library and takes chart type, data, and options as input to render the chart. The output is a PieChart component.

```bash
npm i react-google-charts
```

```javascript
import React from 'react';
import { GoogleChart } from "react-google-charts";
 
const GoogleCharts = (props) => {
    return (
      <GoogleChart
            width={'100%'}
            height={'400px'}
            chartType="PieChart"
            loader={<div>Loading Chart</div>}
            data={[
                ['Task', 'Hours per Day'],
                ['Work', 6.7],
                ['Eat', 13.3],
                ['Commute', 20],
                ['Watch TV', 26.7],
                ['Sleep', 33.3],
            ]}
            options={{
                title: 'My Daily Activities',
                colors: ["#51bb25", "#7366ff", "#f73164", "#148df6", "#ff5f24"]
                
            }}
            rootProps={{ 'data-testid': '1' }}
      />
    );
}

```

```bash
npm uninstall react-google-charts
```

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

### Install and Use Chart.js in Next.js

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/charts

Instructions for installing the 'react-chartjs-2' package and a basic example of rendering a Bar chart. This requires the 'react-chartjs-2' library and uses predefined data and options to display a bar chart. The output is a Bar chart component.

```bash
npm i react-chartjs-2
```

```javascript
/* chartData.jsx */
export const Data = {
  labels: ['Mon', 'Tue', 'Wen', 'Thus', 'Fri', 'Sat', 'Sun'],
  datasets: [
        {
            label: 'y',
            lagend: 'y',
            data: [35, 59, 80, 81, 56, 55, 40],
            borderColor: "#7366ff",
            backgroundColor: "rgba(145, 46, 252, 0.4)",
            highlightFill: "rgba(145, 46, 252, 0.4)",
            highlightStroke: "#7366ff",
            borderWidth: 2
        },
        {
            label: 'z',
            lagend: 'z',
            data: [28, 48, 40, 19, 86, 27, 90],
            borderColor: "#f73164",
            backgroundColor: "rgba(247, 49, 100, 0.4)",
            highlightFill: "rgba(247, 49, 100, 0.4)",
            highlightStroke: "#f73164",
            borderWidth: 2
        }
    ],
    plugins: {
        datalabels: {
            display: false,
            color: 'white'
        }
    }
}
export const Options = {
  maintainAspectRatio: true,
    legend: {
        display: false,
    },
    plugins: {
        datalabels: {
            display: false,
        }
    }
}
 
import { Bar } from 'react-chartjs-2';
import { Data,Option} from './chartData';

const ChartjsExample = () => {
  return(
    <Cardbody>
      <Bar 
          data={Data}
          width={778}
          height={400}
          options={Options} 
      />
    </Cardbody>
  )
}

```

```bash
npm uninstall react-chartjs-2
```

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

### Install react-bootstrap-typeahead

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/forms

This snippet shows how to install the react-bootstrap-typeahead package using npm. It's a direct command-line operation and has no specific dependencies beyond having npm installed.

```bash
npm i react-bootstrap-typeahead
```

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

### Start Development Server

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/installation

Launches the Next.js development server, enabling hot-reloading and other development features. This command is essential for previewing changes during development.

```bash
npm run dev
```

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

### Install reactstrap Table

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/tables

Installs the reactstrap library, which provides components for creating basic HTML tables. This is useful for reducing HTML code and easily theming table layouts.

```bash
npm i reactstrap
```

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

### Install react-i18next for Multi-Language

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/multi_language

This command installs the 'react-i18next' package, which is essential for implementing multi-language support in your Next.js application. This library helps manage translations and language switching.

```bash
npm install --save react-i18next
```

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

### Install Cuba Theme Dependencies

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/installation

Installs all necessary npm packages required for the Cuba theme within the project. This command should be run after navigating into the theme's directory.

```bash
npm install
```

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

### Install react-data-table-component

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/tables

Installs the react-data-table-component library, enabling the creation of advanced, interactive data tables with features like sorting and pagination.

```bash
npm i react-data-table-component
```

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

### Install and Use Reactstrap Pagination Component

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

This snippet shows how to install the reactstrap library and use its Pagination component to create navigation elements. It demonstrates the import statement and the JSX structure for a basic pagination control with previous, next, and page number links.

```bash
npm i reactstrap
```

```javascript
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
<Pagination aria-label="Page navigation" className="pagination-primary">
  <PaginationItem>
    <PaginationLink href="#">
      Previous
    </PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">
      1
    </PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">
      2
    </PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">
      3
    </PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">
      Next
    </PaginationLink>
  </PaginationItem>
</Pagination>
```

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

### Install CKEditor in React

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/editors

Installs the 'react-ckeditor-component' package for CKEditor integration. This is a client-side package, and no server-side configuration is required.

```bash
npm i react-ckeditor-component
```

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

### Install and Use React Perfect Scrollbar

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

Demonstrates how to install and implement a scrollable component using the react-perfect-scrollbar library. This wrapper enhances React Scrollbar functionality. It requires familiarity with Perfect Scrollbar's documentation for advanced usage.

```bash
npm i react-perfect-scrollbar
```

```javascript
import ScrollBar from "react-perfect-scrollbar";

const scrollbarStyles = { borderRadius: 5 }

const Scrollable = () => {

  return (
    <div className="card-body">
        <ScrollBar className="scroll"
        options={{ suppressScrollX: true }}
        >
            <div> <img src = {require('../../assets/images/banner/3.jpg')} alt="girl" className="img-fluid" /></div>
        </ScrollBar>
    </div>
    )
}

```

```bash
npm uninstall react-perfect-scrollbar
```

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

### Clean npm Cache and Reinstall Dependencies

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/faq

This sequence of commands addresses issues related to the npm cache and corrupted node_modules. It first forces a clean of the npm cache, then removes the node_modules directory and package-lock.json file, followed by reinstalling all dependencies.

```shell
npm cache clean --force

```

```shell
rm -rf node_modules
rm package-lock.json
npm install

```

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

### Create Reactstrap Popover

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/basic_ui_elements

Demonstrates how to implement a popover component using 'reactstrap'. This example shows a basic popover with a title and body, controlled by a state variable and a toggle function. The 'placement' prop determines the popover's position relative to the target element.

```javascript
import {popover,popoverHeader,popoverBody} from 'reactstrap'
const example = () => {
  const [popoverOpen, setPopoverOpen] = useState(false)
  const toggle = () => setPopover(!popover);
  return(
    <popover placement="bottom" isOpen={popoverOpen} toggle={toggle} target="Popover1">
      <popoverHeader>Popover Title</popoverHeader>
      <popoverBody>And here's some amazing content. It's very engaging. Right?</popoverBody>
    </popover>
  )
}
```

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

### Install SimpleMDE Editor in React

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/editors

Installs the 'react-simplemde-editor' package for integrating the SimpleMDE Markdown editor. This is a client-side package. Ensure you have Node.js and npm installed.

```bash
npm i react-simplemde-editor
```

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

### Install react-big-calendar

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/useful_apps/calender

Installs the 'react-big-calendar' package using npm. This package is a full-featured calendar component for React.

```bash
npm i react-big-calendar
```

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

### Wrap Components with Context Provider

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/useContext_hook

Demonstrates how to wrap child components with a Context Provider to make the context's data accessible. In this example, 'ProjectProvider' is used to wrap '<Routers />', enabling any component within the router hierarchy to access the shared state.

```typescript
import React from 'react'
import {ProjectContext} from '../ProjectContext'
const App=()=>{
  return(
    <ProjectContext>
       <Routers />  //For Example Children Components
    </ProjectContext>
  )
}
```

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

### Install React Google Maps

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/maps

Installs the react-google-maps package using npm. This package is a dependency for using Google Maps components in a React application.

```bash
npm i react-google-maps
```

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

### Date Picker Integration with React Datepicker

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/forms

This snippet shows how to integrate a date picker component using the 'react-datepicker' library. It allows users to select dates with a formatted interface. The example includes state management for the selected date and a handler for date changes. Installation requires 'npm i react-datepicker'.

```jsx
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const Example = () => {
  const [startDate,setstartDate] = useState(new Date())

  const handleChange = date => {
        setstartDate(date);
    };

  return (
    <Cardbody>
      <DatePicker 
              className="form-control digits" 
              selected={startDate} 
              onChange={handleChange}  />
    </Cardbody>
  );

}
```

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

### Create Reactstrap Alerts

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/basic_ui_elements

Provides examples of creating different types of alerts using the Alert component from 'reactstrap'. Alerts can be styled with various color props, including combined colors like 'primary dark' for specific appearances. The content within the Alert is customizable.

```javascript
import {Alert} from 'reactstrap'

<Alert color="primary dark">This is a info alert—check it out!</Alert>
<Alert color="secondary dark">This is a light alert—check it out!</Alert>
<Alert color="success dark">This is a success alert—check it out!</Alert>
<Alert color="info dark">This is a danger alert—check it out!</Alert>
<Alert color="warning dark">This is a secondary alert—check it out!</Alert>
<Alert color="danger dark">This is a warning alert—check it out!</Alert>
<Alert color="light dark">This is a dark alert—check it out!</Alert>
<Alert color="dark dark">This is a dark alert—check it out!</Alert>
```

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

### Install React Leaflet

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/maps

Installs the react-leaflet package using npm. This package is used for integrating Leaflet maps into React applications.

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

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

### Navigate to Cuba Theme Directory

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/installation

Changes the current directory to the 'theme' folder where the Cuba theme files are located. This is a prerequisite for installing theme dependencies.

```bash
cd theme
```

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

### Basic 'About' Page in Next.js

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/routing

This JavaScript code snippet demonstrates how to create a simple 'About' page component in Next.js. It utilizes React to render basic HTML content. No external dependencies beyond React are required for this basic example.

```javascript
import React from 'react';

  const AboutPage = () => {
    return (
      <div>
        <h1>About Page</h1>
        <p>This is the about page content.</p>
      </div>
    );
  };
  
  export default AboutPage;
  

```

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

### Increase Node.js Memory Limit (Heap out of memory error)

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/faq

These commands help resolve 'Heap out of memory' errors by increasing the memory allocation for Node.js processes. The first command is for Linux users, and the second is for Windows users, both setting the maximum old space size to 4096MB.

```shell
NODE_OPTIONS=--max_old_space_size=4096

```

```shell
set NODE_OPTIONS=--max_old_space_size=4096 npm run build 

```

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

### Create Next.js App

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/installation

Initializes a new Next.js application. This command prompts for project configuration and sets up the basic project structure. It relies on npx, which is typically included with npm versions 5.2+.

```bash
npx create-next-app@latest
```

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

### Increase File Watcher Limit (System limit reached)

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/faq

This command is used on Linux systems to increase the system limit for the number of file watchers, which can prevent errors related to reaching this limit during development.

```shell
sudo sysctl fs.inotify.max_user_watches=524288

```

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

### Initialize react-i18next with Translations

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/multi_language

This snippet shows the initialization of the react-i18next library. It includes importing necessary modules, setting up translation resources for multiple languages (English, Spanish, Chinese), and configuring fallback languages and namespaces. This is a core part of enabling multi-language support.

```typescript
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        // we init with resources
        resources: {
            en: {
                translations: {
                    'General': 'General',
                    'Dashboards,Widgets': 'Dashboards,Widgets',
                    'Dashboard': 'Dashboard',
                    'Default': 'Default',
                  
                }
            },
             es: {
                translations: {
                    'General': 'General',
                    'Dashboards,Widgets': 'Cuadros de mando, widgets',
                    'Dashboard': 'Tablero',
                    'Default': 'Defecto',
                }
            },
            cn: {
                translations: {
                    'General': '一般',
                    'Dashboards': '仪表板',
                    'Widgets':'小部件',
                    'Dashboard': '仪表板',
                 
                }
            },
        },
        fallbackLng: 'en',
        debug: false,

        // have a common namespace used around the full app
        ns: ['translations'],
        defaultNS: 'translations',

        keySeparator: false, // we use content as keys

        interpolation: {
            escapeValue: false
        }
    });

```

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

### Basic Table with reactstrap

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/tables

Demonstrates how to create a simple table using the reactstrap library in a React component. This snippet shows the basic structure for table headers and rows.

```javascript
import { Table } from 'reactstrap';

const Example = (props) => {
  return (
    <Table>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </Table>
  );
}
```

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

### Create Reactstrap Buttons

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/basic_ui_elements

Demonstrates how to create various types of buttons using the Button component from the 'reactstrap' library. Different color props are used to style the buttons. Ensure the appropriate CSS files are linked for custom button types.

```javascript
import {Button} from 'reactstrap'

<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="info">Info</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>
```

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

### Import Translation Files in Index.js

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/multi_language

This code snippet demonstrates how to import the i18n configuration file (`../../i18n`) within the main application entry point (`index.js` or equivalent in Next.js). It also shows the structure of a typical Next.js application with various providers and layout configurations, highlighting where the i18n import fits in.

```javascript
import "../../public/assets/scss/app.scss";
import { useRouter } from "next/router";
import { withoutLayoutThemePath } from "Data/OthersPageData";
import { ToastContainer } from "react-toastify";
import { ProjectProvider } from "helper/project/ProjectProvider";
import "../../i18n";
import { TaskProvider } from "helper/Task/TaskProvider";
import "../../public/assets/scss/app.scss";
import LayoutProvider from "helper/Layout/LayoutProvider";
import Layout from "../layout";
import { BookmarkProvider } from "helper/Bookmark/BookmarkProvider";
import { CustomizerProvider } from "helper/Customizer/CustomizerProvider";
import TodoListProvider from "helper/TodoList/TodoListProvider";
import ContactProvider from "helper/Contacts/ContactProvider";
import withAuth from "helper/WithAuth";

const Myapp = ({ Component, pageProps }: any) => {
  const getLayout =Component.getLayout || ((page: any) => <Layout>{page}</Layout>);
  const router = useRouter();
  const currentUrl = router.asPath;

  return (
    <>
      {withoutLayoutThemePath.includes(currentUrl) ? (
        <Component {...pageProps} />
      ) : (
        <CustomizerProvider>
          <TodoListProvider>
            <ProjectProvider>
              <LayoutProvider>
                <TaskProvider>
                  <BookmarkProvider>
                    <ContactProvider>
                      {getLayout(<Component {...pageProps} />)}
                    </ContactProvider>
                  </BookmarkProvider>
                </TaskProvider>
              </LayoutProvider>
            </ProjectProvider>
          </TodoListProvider>
        </CustomizerProvider>
      )}
      <ToastContainer />
    </>
  );
};

export default withAuth(Myapp);
 

```

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

### Uninstall react-bootstrap-typeahead

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/forms

This snippet shows how to remove the react-bootstrap-typeahead package from your project using npm. This is a command-line operation and requires npm to be installed.

```bash
npm uninstall react-bootstrap-typeahead
```

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

### Build Next.js Application

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/installation

Compiles the Next.js application for production deployment. This command generates optimized static assets and serverless functions in a 'dist' folder.

```bash
npm run build
```

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

### Navigate to App Directory

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/installation

Changes the current directory to the root of the newly created Next.js application. This is a standard command-line operation to access project files.

```bash
cd my-app
```

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

### Implement Google Map with React Google Maps

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/maps

Demonstrates how to set up and display a Google Map using the react-google-maps library. It requires API keys and specific container element heights. The component uses withScriptjs and withGoogleMap HOCs for integration.

```javascript
import { withGoogleMap, GoogleMap, withScriptjs } from "react-google-maps";

const MapContainer = () => {
  const [location, setlocation] = useState({
    address: false,
    mapPosition: {
      lat: 18.5204,
      lng: 73.8567
    },
    markerPosition: {
      lat: 18.5204,
      lng: 73.8567
    }
  });

  const BasicMap = withScriptjs(withGoogleMap(props => (
    <GoogleMap google={props.google}
      defaultZoom={15}
      defaultCenter={{ lat: location.mapPosition.lat, lng: location.mapPosition.lng }}
    >
    </GoogleMap>
  )));

  return (
    <CardBody>
      <BasicMap
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=Yourkey&libraries=places"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: '300px' }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </CardBody>
  );
};

```

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

### Change Language Function

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/multi_language

This code defines a React functional component that utilizes the `useTranslation` hook to get access to the `i18n` instance. It then defines a `changeLanguage` function that accepts a language code (e.g., 'en', 'es') and uses the `i18n.changeLanguage()` method to update the application's current language. This is used for implementing language switching functionality.

```javascript
const Language=()=>{
  const { i18n } = useTranslation();
  const changeLanguage = (lng) => {

```

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

### Create Reactstrap Tags and Pills

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/basic_ui_elements

Illustrates the creation of tags and pills using the Badge component from 'reactstrap'. Various color options are available to style these elements. The 'tag-pills-sm-mb' class is shown for specific styling on dark pills.

```javascript
import { Badge } from 'reactstrap';

<Badge color="primary">Primary</Badge>
<Badge color="secondary">Secondary</Badge>
<Badge color="success">Success</Badge>
<Badge color="info">Info</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="danger">Danger</Badge>
<Badge color="light">Light</Badge>
<Badge color="dark tag-pills-sm-mb">Dark</Badge>
```

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

### Create Reactstrap Progress Bars

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/basic_ui_elements

Shows how to implement progress bars using the Progress component from 'reactstrap'. The 'value' prop sets the progress percentage, and the 'color' prop allows for different color schemes. A value of 0 indicates an empty progress bar.

```javascript
import {Progress} from 'reactstrap'

<Progress value="0"/>
<Progress color="primary" value="25"/>
<Progress color="secondary" value="50"/>
<Progress color="success" value="75"/>
<Progress color="info" value="100"/>
```

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

### Implement React Context Provider

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/useContext_hook

Implements a React Context Provider component that manages and exposes the global state ('projectData') and its updater functions. The state is initialized using the 'useState' hook. This provider wraps child components, making the context available to them.

```typescript
import { useState } from "react";
import ProjectContext from "./index";
import { projectListData } from "Types/projectTypes";
import { commonContextType } from "Types/CommonElementType";

const ProjectProvider = ({ children }: commonContextType) => {
  const [projectData, setProjectData] = useState<[] | projectListData[]>([]);

  const getAllProjectData = (data: projectListData[]) => {
    setProjectData(data);
  };

  return (
    <ProjectContext.Provider
      value={{
        projectData,
        setProjectData,
        getAllProjectData,
      }}
    >
      {children}
    </ProjectContext.Provider>
  );
};

export { ProjectProvider };
```

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

### Uninstall React-Image-Crop Package

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

Command to remove the react-image-crop library from your project dependencies.

```bash
npm uninstall react-image-crop
```

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

### Usage of react-big-calendar

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/useful_apps/calender

Demonstrates the basic usage of the 'react-big-calendar' component in a React application. It requires importing the Calendar component and a moment localizer, and then rendering the Calendar with specified props.

```javascript
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

const localizer = momentLocalizer(moment)

const MyCalendar = props => (
  <div>
    <Calendar
        localizer={localizer}
        events={myEventsList}
        startAccessor="start"
        endAccessor="end"
        style={{height: 500}}
    />
  </div>
)
```

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

### Basic Usage of Typeahead Component

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/forms

Demonstrates the basic integration of the Typeahead component from react-bootstrap-typeahead in a React application. It requires importing the component and its CSS, and assumes the existence of 'options' state and 'useState' hook.

```jsx
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';

const Example = () => {
  const [multiple, setMultiple] = useState(false);
  return(
    <Cardbody>
        <Typeahead
          id="basic-typeahead"
          labelKey="name"
          multiple={multiple}
          options={options}
          placeholder="Choose a state..."
        />
    </Cardbody>
  )
}
```

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

### Apache .htaccess for Next.js

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/installation

Configuration for Apache HTTP Server to handle client-side routing for a Next.js application. This .htaccess file ensures that all requests are directed to index.html, allowing client-side routing to function correctly.

```apache
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
```

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

### Implement Leaflet Map with React Leaflet

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/maps

Shows how to render a basic Leaflet map using the react-leaflet library. It includes TileLayer for map tiles, Marker for location points, and Popup for additional information. The map is configured with center, zoom, and other interactive properties.

```javascript
import { Map as LeafletMap, TileLayer, GeoJSON, Marker, Popup } from 'react-leaflet';
import WorldData from 'world-map-geojson';

const LeafletMap = () => {
  return (
    <div id="gmap-simple">
      <LeafletMap
        center={[50, 10]}
        zoom={6}
        maxZoom={10}
        attributionControl={true}
        zoomControl={true}
        doubleClickZoom={true}
        scrollWheelZoom={true}
        dragging={true}
        animate={true}
        easeLinearity={0.35}
      >
        <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' />
        <Marker position={[50, 10]}>
          <Popup>
            Popup for any custom information.
          </Popup>
        </Marker>
      </LeafletMap>
    </div>
  );
};

```

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

### Apply Madrid Layout with Next.js

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/theme_layouts

The Madrid layout is similar to Paris with a dark sidebar but offers a lower contrast for easier eye transition. Apply 'page-wrapper compact-wrapper color-sidebar' classes.

```javascript
const YourComponent = () => {
  return (
    <div className="page-wrapper compact-wrapper color-sidebar">{/* Page content */}</div>
  );
};
```

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

### Usage CKEditor in React

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/editors

Demonstrates how to use CKEditor in a React component. It sets up state for the editor content and an event handler for content changes. Dependencies include React's useState hook.

```jsx
import CKEditors from "react-ckeditor-component";

const Editor =  () =>  {
const [content,setContent] = useState('content')
const onChange = (evt) => {
    const newContent = evt.editor.getData();
    setContent(newContent)
}
  return (
    <CKEditors
          activeclassName="p10"
          content={content}
          events={{
              "change": onChange
          }}
    />
    )
  }
```

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

### Apply Mixed Layouts via Body ClassName

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/mix_layout

Demonstrates how to set the 'className' attribute on the body tag to control the mixed layout modes. This method allows for switching between light and dark themes with corresponding sidebar color schemes.

```HTML
<body className='light-only'></body>
<!-- Light Layout With Light Sidebar -->

<body className='dark-sidebar'></body>
<!-- Light Layout With Dark Sidebar -->

<body className='dark-only'></body>
<!-- Dark Layout With Dark Sidebar -->
```

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

### Uninstall SweetAlert2 Package

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

Command to remove the sweetalert2 library from your project dependencies.

```bash
npm uninstall sweetalert2
```

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

### Smart Table with react-data-table-component

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/tables

Shows how to implement a smart, data-driven table using react-data-table-component. It includes defining data, columns with properties like sorting and centering, and enabling pagination.

```javascript
import ReactTable from 'react-data-table-component';

const Example = () => {
  const Data = [
    {id:"1",name: "Product Menu",status: <i className="fa fa-circle font-success f-12" />,creat_on:"2018-04-18T00:00:00"},
    {id:"2",name: "Category Menu",status: <i className="fa fa-circle font-warning f-12" />,creat_on:"2018-04-18T00:00:00"}
  ]
  const Columns = [
        {name: 'ID',selector: 'id',sortable: true,center:true,},
        {name: 'Name',selector: 'name',sortable: true,center:true,},
        {name: 'Status',selector: 'status',sortable: true,center:true},
        {name: 'Creat_on',selector: 'creat_on',sortable: true,center:true},
    ];
return (
  <Fragment>
    <ReactTable
        columns={Columns}
        data={Data}
        noHeader
        pagination
    />
  </Fragment>
)
}
```

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

### Importing useTranslation Hook from react-i18next

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/multi_language

Demonstrates how to import the `useTranslation` hook from the `react-i18next` library. This hook is essential for accessing translation functions within React components.

```javascript
import { useTranslation } from 'react-i18next';
```

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

### Add Link to Sidebar (JSON)

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/sidebar

This JSON object represents a new link to be added to the sidebar. It includes the path, an icon identifier, the display title, and the type of link. Ensure the `path` matches a defined router entry.

```json
{
  "path": "/app/email-app",
  "icon": "email",
  "title": "Email",
  "type": "link",
  "id": 7
}
```

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

### Uninstall React-Range Package

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/advance_ui_elements

Command to remove the react-range library from your project dependencies.

```bash
npm uninstall react-range
```

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

### Implement Horizontal Sidebar

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/sidebar_options

This code snippet demonstrates how to implement a horizontal sidebar layout. It involves changing the 'sidebar-layout' property within the SidebarSettingsClass.tsx file. This is useful for users who prefer a horizontal navigation style.

```typescript
...
    // (e) => handleSidebarSetting("compact-wrapper") for the default sidebar.
    (e) => handleSidebarSetting("horizontal-wrapper") for the Horizontal sidebar.
...
```

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

### Uninstall reactstrap Table

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/components/tables

Removes the reactstrap library from the project, typically done when tables are no longer needed or to reduce bundle size.

```bash
npm uninstall reactstrap
```

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

### Apply Tokyo Layout with Next.js

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/theme_layouts

The Tokyo layout maximizes page content space by making the sidebar more compact. Use 'page-wrapper compact-sidebar' classes for this layout.

```javascript
const YourComponent = () => {
  return (
    <div className="page-wrapper compact-sidebar">{/* Page content */}</div>
  );
};
```

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

### Create React Context for Global State

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/useContext_hook

Defines a React Context object to hold global state and functions. This context, 'ProjectContext', is designed to manage project data and provides functions to update it. It doesn't require external packages as 'useContext' is a built-in React hook.

```typescript
import { projectListData } from "Types/projectTypes";
import { Dispatch, SetStateAction, createContext } from "react";

type GlobalType = {
  projectData: [] | projectListData[];
  setProjectData: Dispatch<SetStateAction<[] | projectListData[]>>;
  getAllProjectData: (data:projectListData[]) => void;

};

const ProjectContext = createContext<GlobalType>({
  projectData: [],
  setProjectData: () => {},
  getAllProjectData: () => {},
});

export default ProjectContext;
```

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

### Apply Dubai Layout with Next.js

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/theme_layouts

The Dubai layout is the default theme layout, featuring essential components like sidebar and header. It is applied by adding 'page-wrapper compact-wrapper' classes to the page wrapper div.

```javascript
const YourComponent = () => {
  return (
    <div className="page-wrapper compact-wrapper">{/* Page content */}</div>
  );
};
```

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

### Apply New York Layout with Next.js

Source: https://next-cuba-doc-pixelstrapthemes.vercel.app/getting_started/theme_layouts

The New York layout combines a boxed layout with a visible sidebar. Apply 'page-wrapper compact-wrapper box-layout' classes to achieve this design.

```javascript
const YourComponent = () => {
  return (
    <div className="page-wrapper compact-wrapper box-layout">{/* Page content */}</div>
  );
};
```
Tokens:
Raw