Cuba React Admin Theme

https://react-cuba-doc.vercel.app
Admin
Cuba React Admin Theme is a pure React admin dashboard template with no jQuery dependency, featuring...
Tokens:18,718
Snippets:175
Trust Score:7.8
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install and Use Reactour Component for Tours

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

Installs the 'reactour' library to create guided tours within a React application. It requires React. The example shows how to define tour steps with selectors and content, and how to manage the tour's open state and closing behavior.

```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 Google Charts in React

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

This snippet shows how to install the 'react-google-charts' package using npm and provides a basic example of rendering a PieChart. It includes the necessary import and data structure for the chart.

```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' }}
      />
    );
}

```

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

### Install and Use Chart.js in React

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

This snippet details the installation of 'react-chartjs-2' and provides an example of creating a bar chart using Chart.js. It includes data and options configurations for the chart.

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

```

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

### Install and Use Apex Charts in React

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

This snippet demonstrates how to install the 'react-apexcharts' package using npm and provides an example of how to implement an area chart. It includes the necessary import statements and chart configuration options.

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

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

### Install and Use React StepZilla Component

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

Installs the 'react-stepzilla' library for creating step-by-step interfaces. It requires React. The example demonstrates setting up steps with components and configuring the StepZilla component to hide default navigation and step indicators.

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

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

### Start React Development Server

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

Launches the development server for the React application, allowing you to view and test your application in real-time during development. It uses the 'npm start' command.

```bash
npm start
```

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

### Install and Use Knob Chart in React

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

This example demonstrates installing the 'knob' package and creating a simple knob chart component. It utilizes the useEffect hook to initialize and append the knob chart to a DOM element.

```bash
npm i knob
```

```javascript
import React  from 'react';
import Knob,{useEffect} from "knob";

const KnobChart = () => {

  useEffect(() => {
    var exampleknob = Knob({
        value: 35,
        left: 1,
        angleOffset: 90,
        className: "review",
        thickness: 0.1,
        fgColor: "#7366ff",
        readOnly: true,
        dynamicDraw: true,
        tickColorizeValues: true,
        bgColor: '#f73164',
        lineCap: 'round',
        displayPrevious:false
    })
    document.getElementById('profit').appendChild(exampleknob);
  },[])

  return(
        <div className="knob-block text-center">
          <div className="knob" id="profit">
          </div>
        </div>
  )
}

```

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

### Install Node.js Dependencies

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

Installs all the necessary dependencies for a project, including the Cuba theme, as defined in the 'package.json' file. This command is essential after cloning or downloading a project.

```bash
npm install
```

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

### Install react-chartist using npm

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

This command installs the react-chartist package from npm, which is a React wrapper for the Chartist.js charting library. Ensure you have Node.js and npm installed. No specific inputs or outputs are required beyond successful package installation.

```bash
npm i react-chartist
```

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

### Install and Use React Rating Component

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

Installs the 'react-rating' library for implementing star ratings in React applications. It requires React and basic state management. The example shows how to render a rating component with custom star symbols and handle rating changes.

```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 SweetAlert2 for Alerts

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

Shows how to install the sweetalert2 library and implement a basic alert using the SweetAlert component. This is used for displaying modal messages and notifications. It requires the sweetalert2 package.

```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 react-bootstrap-typeahead

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

Installs the react-bootstrap-typeahead package using npm. This is the first step to using the typeahead component in your React application. Ensure you have Node.js and npm installed.

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

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

### Install and Use react-files for Image Uploads

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

Installs the 'react-files' package and provides a React component for image uploads. It allows users to select a single image file, displays a preview of the selected image, and handles file changes and errors.

```bash
npm i react-files
```

```javascript
import Files from 'react-files'
import { useState } from 'react'


const UploadImage = () =>  {
const [files, setFiles] = useState([]);

function deleteFile(e) {
  setFiles([]);
  return files
}
const onFilesChange = (files) => {
  setFiles(files)
}
const onFilesError = (error, file) => {
  setFiles(file)
}

return (
    <Files
      className='files-dropzone fileContainer'
      onChange={onFilesChange}
      onError={onFilesError}
      accepts={['image/*']}
      multiple={false}
      maxFileSize={10000000}
      minFileSize={0}
      clickable
    >
        {
          files.length > 0
              ? <div className='files-gallery'>
                  {files.map((file,index) =>
                      <img className='files-gallery-item' alt="img" src={file.preview.url} key={index} />
                  )}
              </div>
              : <div className="d-flex justify-content-center">
                  <button className="chooseFileButton me-2">Upload Image</button>
                </div>
      }
  </Files>
)
}

```

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

### Install and Use Reactstrap Pagination Component

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

Demonstrates how to install the reactstrap library and use its Pagination component. This component is useful for creating navigation elements for paginated content. It requires the reactstrap package.

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

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

### Integrate react-i18next Initialization in React App

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

This code snippet shows how to import the initialized i18n configuration file (`./i18n`) into your application's entry point (`index.js`). This ensures that the translation setup is active when the React application renders.

```javascript
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
import './i18n';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

reportWebVitals();

```

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

### Install and Use React Scrollbar Component

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

Installs the 'react-perfect-scrollbar' library, which is a React wrapper for Perfect Scrollbar. It requires familiarity with the Perfect Scrollbar documentation. The example shows how to implement a scrollable div with an image, suppressing horizontal scrolling.

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

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

### Install React Big Calendar

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

Installs the 'react-big-calendar' package using npm. This is the primary step to integrate calendar features into your React application.

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

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

### Install reactstrap for Tables

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

Installs the reactstrap library, which provides HTML-like table components for React. This simplifies table creation and theming by reducing HTML code and allowing easy class-based customization.

```bash
npm i reactstrap
```

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

### Install and Use react-dropzone-uploader

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

Installs the 'react-dropzone-uploader' package and demonstrates its basic usage within a React component. This component allows users to drag and drop files or click to browse their local file system for upload. It handles upload parameters, file status changes, and submission.

```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 Google Map with npm

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

Installs the 'react-google-maps' package using npm. This is the first step to integrate Google Maps into your React application.

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

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

### Install react-data-table-component for Smart Tables

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

Installs the 'react-data-table-component' library, enabling the creation of feature-rich, 'smart' tables in React applications. This library simplifies the implementation of features like sorting and pagination.

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

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

### Reactstrap Progress Bar Examples

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

Illustrates the usage of the Progress component from reactstrap to create progress bars. Examples include a basic progress bar, and progress bars with different color themes (primary, secondary, success, info) and values.

```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"/>
```

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

### Install CKEditor in React

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

Installs the react-ckeditor-component package using npm. This is the first step to integrating CKEditor into your React application.

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

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

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

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

Shows how to install the react-image-crop library and use its ReactCrop component for image cropping functionality. This component requires the react-image-crop package and its CSS file.

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

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

### Reactstrap Alert Examples

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

Provides examples of the Alert component from reactstrap, showcasing different color themes and styles. Includes alerts for primary, secondary, success, info, warning, danger, light, and dark, demonstrating how to display messages with distinct visual cues.

```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 Leaflet Map with npm

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

Installs the 'react-leaflet' package using npm. This is the prerequisite for using Leaflet maps in your React application.

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

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

### Install and Use React-Dragula for Drag and Drop

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

Demonstrates how to install the react-dragula library and use its dragula function for implementing drag and drop functionality. This requires the react-dragula package and its CSS file. It allows elements to be reordered within a container.

```bash
npm i react-dragula
```

```javascript
import dragula from 'react-dragula';
import  'node_modules/react-dragula/dist/dragula.css';
const DragAndDrop = (props) => {
  const dragulaDecorator = (componentBackingInstance) => {
    if (componentBackingInstance) {
        let options = {};
        dragula([componentBackingInstance], options);
        }
    };
  return (
    <Container  ref={dragulaDecorator}>
      <div>Swap me around</div>
      <div>Swap her around</div>
      <div>Swap him around</div>
      <div>Swap them around</div>
      <div>Swap us around</div>
      <div>Swap things around</div>
      <div>Swap everything around</div>
    </Container>
  )
}
```

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

### Reactstrap Popover Example

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

Demonstrates the implementation of a basic Popover component using reactstrap. It includes setting up the popover state, a toggle function, and rendering the popover with a header and body content. The target attribute links the popover to a specific 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>
  )
}
```

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

### Reactstrap Button Examples

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

Demonstrates how to use the Button component from reactstrap to create primary, secondary, success, info, warning, and danger buttons. Ensure the appropriate CSS is linked for different 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>
```

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

### Usage Example for React Big Calendar

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

Demonstrates how to import and use the Calendar component from 'react-big-calendar'. It requires 'moment' for localization and defines event data and accessors.

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

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

### Reactstrap Tag and Pills Examples

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

Shows how to create Tag and Pills components using the Badge component from reactstrap. Various color options like primary, secondary, success, info, warning, danger, light, and dark are illustrated. Also includes an example for pill-shaped badges with a small size modifier.

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

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

### Install MDE Editor in React

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

Installs the react-simplemde-editor package using npm. This is required to use the MDE (Markdown) editor in your React application.

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

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

### Install and Use React-Range Slider Component

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

Demonstrates how to install the react-range library and use its RangeSlider component for creating interactive sliders. This component allows users to select a value within a specified range. It requires the react-range package.

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

```

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

### Initialize react-i18next with Translations

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

Initializes the i18next instance with translation resources for multiple languages (English, Spanish, Chinese). It uses LanguageDetector to automatically detect the user's language and falls back to English if the detected language is not supported. This setup defines the text content for different languages.

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

```

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

### React Form Validation with react-hook-form and reactstrap

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

Demonstrates form validation in React using react-hook-form for logic and reactstrap for UI components. It ensures users input data in the correct format by displaying validation messages. Requires 'react-hook-form' and 'reactstrap' to be installed.

```jsx
import React, { Fragment } from 'react';
import { useForm } from 'react-hook-form'
import { Container, Row, Col, Card, CardHeader, CardBody, Button, Form, FormGroup, Label, Input, InputGroup, InputGroupText } from 'reactstrap'
import { CustomStyles, FirstName, LastName,  SubmitForm } from '../../../constant'

const FormValidation = () => {
  const { register, handleSubmit, formState:{errors} } = useForm();

  const onSubmit = data => {
    if (data !== '') {
      alert('You submitted the form and stuff!');
    } else {
      errors.showMessages();
    }
  };

  return (
    <Fragment>
  <Breadcrumb parent='Form' title='Validation' />
  <Container fluid={true}>
    <Row>
      <Col sm='12'>
        <Card>
          <CardHeader>
            <h5>{CustomStyles}</h5>
          </CardHeader>
          <CardBody>
            <Form className='needs-validation' noValidate='' onSubmit={handleSubmit(onSubmit)}>
              <Row>
                <Col md='4 mb-3'>
                  <Label htmlFor='validationCustom01'>{FirstName}</Label>
                  <input className='form-control' name='firstName' type='text' placeholder='First name' {...register('firstName', { required: true })} />
                  <span>{errors.firstName && 'First name is required'}</span>
                  <div className='valid-feedback'>{'Looks good!'}</div>
                </Col>
                <Col md='4 mb-3'>
                  <Label htmlFor='validationCustom02'>{LastName}</Label>
                  <input className='form-control' name='lastName' type='text' placeholder='Last name' {...register('lastName', { required: true })} />
                  <span>{errors.lastName && 'Last name is required'}</span>
                  <div className='valid-feedback'>{'Looks good!'}</div>
                </Col>
              </Row>
              <Button color='primary'>{'Submit form'}</Button>
            </Form>
          </CardBody>
        </Card>
      <Card>
    </Card>
  </Col>
  </Row>
  </Container>
</Fragment>;
  );
};

export default FormValidation;
```

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

### Implement Language Switching Functionality with react-i18next

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

Defines a React component that uses the `useTranslation` hook to get access to the `i18n` object. It includes a `changeLanguage` function that updates the application's current language based on user interaction. This component renders a list of language options for the user to select.

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

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

    return(
       <ul>
          <li onClick= {() => changeLanguage('en')}>
            <a href="#javascript">
              <i className="flag-icon flag-icon-is"></i> English
            </a>
          </li>
          <li onClick:{() => changeLanguage('es') }>
            <a href="#javascript">
              <i className="flag-icon flag-icon-um"></i> Spanish
            </a>
          </li>
          </ul>
    )
  }
export default Language

```

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

### React Date Picker Integration with react-datepicker

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

Integrates a date picker component into a React application using the 'react-datepicker' library. This allows users to easily select dates in a formatted and visually appealing manner. Requires 'react-datepicker' to be installed. The package can be removed using 'npm uninstall 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 React App

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

Initializes a new React application using the create-react-app command. This command sets up the basic project structure and necessary dependencies for a React project.

```bash
npx create-react-app my-app
```

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

### Build React Application for Production

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

Compiles and bundles the React application into production-ready files, typically for deployment. The output is usually placed in a 'dist' folder.

```bash
npm run build
```

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

### Google Map Integration in React

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

Demonstrates how to use the 'react-google-maps' library to display a Google Map. It requires API keys and configuration for map display, center, and zoom levels. Includes necessary imports and component structure.

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

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

### Navigate to App Directory

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

Changes the current directory to the newly created React application's workspace folder. This is a necessary step before running application commands.

```bash
cd my-app
```

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

### Import react-i18next Core Components

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

Imports the necessary components from the react-i18next library, including the i18next instance, language detector, and the React integration helper. These are essential for initializing and managing translations.

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

```

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

### Basic Usage of Typeahead Component

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

Demonstrates the basic usage of the Typeahead component from 'react-bootstrap-typeahead'. It requires importing the component and its CSS, and then rendering it with necessary props like 'id', 'labelKey', 'multiple', 'options', and 'placeholder'.

```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 React Routing

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

A configuration file for Apache HTTP Server to handle client-side routing in a single-page React application. It ensures that all requests are directed to the index.html file.

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

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

### Wrap Components with React Context Provider

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

Demonstrates how to integrate the created context provider into the application's component tree. By wrapping child components (like `<Routers />`) with `<ContactProvider>`, the context's values become accessible to all descendant components.

```javascript
import React from 'react';
import { ContactProvider } from '../ContactProvider';

const App = () => {
    return (
        <ContactProvider>
            <Routers />  // For Example Children Components
        </ContactProvider>
    )
}

export default App;
```

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

### Implement React Context Provider with useState

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

Creates a provider component that wraps child components and makes the context data available to them. It utilizes the useState hook to manage the state (e.g., 'users') that will be shared via the context. This pattern helps in centralizing state logic.

```javascript
import React, { useState } from 'react';
import Context from './index';

const ContactProvider = (props) => {
    const [users, setUsers] = useState([]);

    return (
        <Context.Provider
            value={{
                ...props,
                users,
                setUsers
            }}>
            {props.children}
        </Context.Provider>
    )
}

export default ContactProvider;
```

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

### Basic Table with reactstrap

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

Demonstrates the usage of reactstrap's Table component to create a basic HTML table in React. This component facilitates the creation of dynamic tables by managing data within an 'items' object, automatically generating fields 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>
  );
}
```

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

### Uninstall react-dropzone-uploader

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

Removes the 'react-dropzone-uploader' package from the project's dependencies.

```bash
npm uninstall react-dropzone-uploader
```

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

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

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

Implements a smart table using the 'react-data-table-component' library. It defines data and column configurations, enabling features like sorting and pagination for a dynamic tabular data display. Dependencies include React and Fragment.

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

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

### Uninstall react-files

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

Removes the 'react-files' package from the project's dependencies.

```bash
npm uninstall react-files
```

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

### Uninstall SweetAlert2

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

Provides the command to uninstall the sweetalert2 package from your project, removing the SweetAlert functionality.

```bash
npm uninstall sweetalert2
```

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

### Uninstall reactstrap

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

Removes the reactstrap package from the project. This command is used to uninstall the library when it is no longer needed.

```bash
npm uninstall reactstrap
```

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

### Usage of MDE Editor in React

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

Shows how to implement the SimpleMDE editor in a React component. It includes state management for the markdown text and basic configuration options like autofocus and spellChecker. Requires 'react-simplemde-editor' and 'useState' from React.

```javascript
import SimpleMDE from "react-simplemde-editor";
import React, { useState } from 'react';

const MdeEDitor = () => {
    const [text, setText] = useState("Enter text in the area on the left. For more info, click the ? (help) icon in the menu.");

    const handleChange = () => {
        // In a real application, you would update the state here with the new value
        // setText(newValue);
        console.log('Editor content changed');
    };

    return (
        <SimpleMDE
            id="editor_container"
            onChange={handleChange}
            value={text}
            options={{
                autofocus: true,
                spellChecker: false
            }}
        />
    );
};

export default MdeEDitor;
```

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

### Uninstall React-Image-Crop Component

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

Provides the command to uninstall the react-image-crop package from your project, removing the image cropping functionality.

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

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

### Leaflet Map Integration in React

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

Shows how to integrate a Leaflet Map in a React component using 'react-leaflet'. It includes setting map center, zoom, and adding markers with popups. Requires 'world-map-geojson' for geographical data.

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

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

### Create React Context with createContext

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

Defines a new context object using React's createContext function. This context can be used to share data across the component tree. No external dependencies are required as it's a built-in React hook.

```javascript
import { createContext } from 'react';

const ContactAppContext = createContext();

export default ContactAppContext;
```

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

### Apply Dubai Layout in React

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

The Dubai layout is the default theme layout, featuring essential components like a sidebar and header. Apply 'page-wrapper compact-wrapper' to the main div for this layout.

```jsx
<div className="page-wrapper compact-wrapper">...</div>
```

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

### Uninstall React-Dragula

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

Provides the command to uninstall the react-dragula package from your project, removing the drag and drop functionality.

```bash
npm uninstall react-dragula
```

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

### Uninstall react-data-table-component

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

Removes the 'react-data-table-component' library from the project. This command is used to uninstall the library when it is no longer needed.

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

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

### Apply New York Layout in React

Source: https://react-cuba-doc.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' for this combination.

```jsx
<div className="page-wrapper compact-wrapper box-layout">...</div>
```

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

### Apply Madrid Layout in React

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

Similar to Paris, the Madrid layout uses a dark sidebar but with a lower contrast for easier eye transition. Apply 'page-wrapper compact-wrapper color-sidebar'.

```jsx
<div className="page-wrapper compact-wrapper color-sidebar">...</div>
```

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

### Apply Tokyo Layout in React

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

The Tokyo layout prioritizes page content by making the sidebar more compact. Use 'page-wrapper compact-sidebar' to achieve this layout.

```jsx
<div className="page-wrapper compact-sidebar">...</div>
```

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

### Consume React Context in a Component with useContext

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

Shows how to access the context data within a functional component using the useContext hook. It imports the context object and then destructures the required values (e.g., 'users') from the context. This eliminates the need to pass props down manually.

```javascript
import React, { useContext } from 'react';
import ContactAppContext from '../../../_helper/Contact/index';

const LeftContact = () => {
    const { users } = useContext(ContactAppContext);

    return (
        <h1>{users}</h1>
    )
}

export default LeftContact;
```

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

### Apply Seoul Layout in React

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

The Seoul layout is similar to Dubai but features a detached sidebar. Apply 'page-wrapper compact-wrapper modern-type' for this configuration.

```jsx
<div className="page-wrapper compact-wrapper modern-type">...</div>
```

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

### Apply Paris Layout in React

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

The Paris layout focuses on sidebar aesthetics with a dark background and vibrant foreground. Apply 'page-wrapper compact-wrapper dark-sidebar' for this style.

```jsx
<div className="page-wrapper compact-wrapper dark-sidebar">...</div>
```

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

### Usage of CKEditor in React

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

Demonstrates how to use the CKEditor component in a React functional component. It shows state management for content and handling editor changes. Requires 'react-ckeditor-component' and 'useState' from React.

```javascript
import CKEditors from "react-ckeditor-component";
import React, { useState } from 'react';

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
            }}
        />
    );
};

export default Editor;
```

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

### Remove Google Charts from React Project

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

This command is used to uninstall the 'react-google-charts' package from your project, removing it and its associated files.

```bash
npm uninstall react-google-charts
```
Tokens:
Raw