Hello Developers, In this blog, we will learn how we can implement placeholder component in react js
First, make a new app using the following command
npx create-react-app
Now install react suite library in your app using the following command
npm i rsuite
Now import important files in your app js file
import { Placeholder } from 'rsuite';
import 'rsuite/dist/rsuite.min.css';
Now you can use placeholder component anywhere
<Placeholder.Paragraph />
Paragraph is the default layout of placeholder you can customize it
You can also add square,image and circle icons to the left by using graph property
<Placeholder.Paragraph graph='circle' /> <Placeholder.Paragraph graph='square' /> <Placeholder.Paragraph graph='image' />
Demo:
You can also change the number of lines, spacing by using rows property
<Placeholder.Paragraph graph='circle' rows={10} />
Demo:
Grid Placeholder :
Grid placeholder is useful in tables or when you are showing data with rows and columns
<Placeholder.Grid rows={5} columns={6} />
Demo:
