3

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

vimov32802
  • 89
  • 2
  • 5

1 Answers1

4

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")
  }
InvalidReferenceException
  • 964
  • 6
  • 14
  • Thank you, but I would like to render react component. Of course for my image example I can set the background image.. But in short, I would like to render content of card as a placeholder. – vimov32802 Mar 25 '21 at 12:34
  • @vimov32802 For that you either make your own fork/implementation of the library or you can insert a position: "fixed" card with left,right,top,bottom css at the coordinates for the placeholder of class .react-grid-placeholder, like so: https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element-relative-to-the-browser-window You can use MutationObserver to detect when the placeholder is on screen and add your fixed card or a plugin like this one https://github.com/pie6k/jquery.initialize – InvalidReferenceException Mar 25 '21 at 13:21