How to render custom placeholder in react-grid-layout

user_15267691 0
Viewed 1538

Is there any way how to render custom placeholder (red item) in react-grid-layout?

I would like to render for example some <img src...> in this red placeholder.

I didn't found any informations about this in official docs (https://github.com/react-grid-layout/react-grid-layout).

Any tips?

enter image description here

react-grid-layout reactjs drag-and-drop
1 Answers

You can override the placeholder using the css class .react-grid-placeholder. This is part of the css styles that you import. So where you import the styles :

import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';

import './yourstyles.css';

and in yourstyles.css you can use an image as background like so:

.react-grid-item.react-grid-placeholder {
    background-color: background-image: url("imageURL")
  }
user_12461940
Related