npx create-react-app foldername
cd foldername
npm install @material-ui/core
Example : Now write down the following code in the App.js
file. Here, App is our default component where we have written our code.
import React from 'react';
import Popper from '@material-ui/core/Popper';
export default function App() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
return (
<div style={{ display: 'block', padding: 30 }}>
<h4>How to use Popper Component in ReactJS?</h4>
<button type="button" onClick={(event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
}}>
Click Me to Toggle Popper
</button>
<Popper
id={open ? 'simple-popper' : undefined}
open={open}
anchorEl={anchorEl}>
<div style={{
padding: 2,
border: '1px solid',
backgroundColor: 'gray',
}}>Greetings from Free Time Learn</div>
</Popper>
</div>
);
}
Step to Run Application : Run the application using the following command from the root directory of the project.
npm start
Output : Now open your browser and go to http://localhost:3000/, you will see the following output.