To start a boilerplate PrimeReact project follow these very simple instructions:

1. $ npm create vite@latest

2. cd and install pacakages ($npm install)

3. code .

4. code [main.jsx] and add the PrimeReactProvider & theme.css

import { PrimeReactProvider, PrimeReactContext } from 'primereact/api';
import "primereact/resources/themes/lara-light-cyan/theme.css";


// WRAP App with
PrimeReactProvider

 <PrimeReactProvider> <App/> </PrimeReactProvider>

EXAMPLES

Forms

[Input]

What It Does:

  • Initializes a state variable questionTimer with a default value of 5.

  • Renders a text input field (InputText) where the user can type a new value.

  • Updates questionTimer whenever the input changes.

  • Displays the current value of questionTimer in formatted JSON below the input.

const [questionTimer, setquestionTimer] = useState(5) // seconds
           
InputText<InputText
                onChange={(e) => setquestionTimer(e.target.value)}
                value={questionTimer}></InputText><br />
            <pre>{JSON.stringify(questionTimer, null, 2)}</pre>

[Dropdown] Basic & Preferred

       
const [selectFormat, setselectFormat] = useState('Letters and Numbers') // default
                
<FloatLabel>
                            <Dropdown
                                value={selectFormat}
                                onChange={(e) => setselectFormat(e.target.value)}
                                options={['Letters Only', 'Numbers Only', 'Letters and Numbers' ]}
                                optionLabel="format" // is the name of the object property to display
                                placeholder="Select a format"
                                className="w-full md:w-14rem"
                            />
                            <label htmlFor="selectFormat">Select a Format </label>
                        </FloatLabel>
                        <pre>{JSON.stringify(selectFormat, null, 2)}</pre>

 

What It Does:

  • Sets up a dropdown menu with a list of cities.

  • Tracks the selected city using selectedCity state.

  • Updates the state when the user selects a city.

  • Displays the selected city in JSON format below the dropdown.

    const [selectedCity, setSelectedCity] = useState(null);
    const cities = ['New York', 'Rome', 'London', 'Istanbul', 'Paris'];
            <div className="card flex justify-content-center">
                <Dropdown
                    value={selectedCity}
                    onChange={(e) => setSelectedCity(e.value)}
                    options={cities}
                    placeholder="Select a City"
                    className="w-full md:w-14rem"
                />
                <pre>{JSON.stringify(selectedCity, null, 2)}</pre>
            </div>

[DropDown 1 through 10 in numbers]

What It Does: DONT USE THIS METHOD AS IT RETURN AN OBJECT, UNLESS THATS WHAT YOU WANT!

For objects, check this out a google AI result

  • Creates a dropdown with string values from '1' to '10'.

  • Lets the user select a number of seconds.

  • Updates questionTimer with the selected value.

  • Displays the current value in JSON format.

const [questionTimer, setquestionTimer] = useState(5) // seconds
<Dropdown
                value={questionTimer}
                onChange={(e) => setquestionTimer(e.target.value)}
                options={[...Array(10).keys()].map(i => { return (i + 1).toString() })}
                optionLabel="time" // is the name of the object property to display
                placeholder="Select a Number Of Seconds"
                className="w-full md:w-14rem"
            />
<pre>{JSON.stringify(questionTimer, null, 2)}</pre>

Done