Prime-react in ReactJS

What is Prime-react?

Prime react comes with some native components inside it, also it comes with lots of customizations

First, create a new project using the following command

npx create-react-app primereact

Then, install prime-react in your app using the following command

// with npm
npm install primereact primeicons

// with yarn
yarn add primereact primeicons

Copy and paste this code into your app.js file.

Note: (Don’t forget to import CSS file which is required either it will not work)

import React, { useState } from 'react'
// import { AutoComplete } from 'primereact/autocomplete';
// import { Button } from 'primereact/button';
import { Dropdown } from 'primereact/dropdown';
import { Checkbox } from 'primereact/checkbox';
import 'primeicons/primeicons.css';
import 'primereact/resources/themes/lara-light-indigo/theme.css';
import 'primereact/resources/primereact.css';
// import 'primeflex/primeflex.css';
const Primereact = () => {
    const [checked, setChecked] = useState(false)
    const [city, setCity] = useState([])
    const citySelectItems = [
        {label: 'New York', value: 'NY'},
        {label: 'Rome', value: 'RM'},
        {label: 'London', value: 'LDN'},
        {label: 'Istanbul', value: 'IST'},
        {label: 'Paris', value: 'PRS'}
    ];
    return (
        <div style={{textAlign:'center'}}>
            <h5>Checkbox</h5>
            <div className="field-checkbox" style={{gap:'15px',display:'flex',justifyContent:"center"}}>
                <Checkbox inputId="binary" checked={checked} onChange={(e) => setChecked(e.target.checked)} />
                <label htmlFor="binary">Remember Me</label>
            </div>
            <h5>Dropdown</h5>
            <Dropdown value={city} options={citySelectItems} onChange={(e) => setCity(e.value)} placeholder="Select a City"/>
        </div>
    )
}

export default Primereact

That’s it now you can make amazing components with prime-react