React-beautiful-dnd: Hiding Placeholder

[mtamilcse92]

I am not able to hide the placeholder during rearrange the items.

<Droppable droppableId={droppableId}>
    {provided => (
      <div
        ref={provided.innerRef}
        {...provided.droppableProps}
        id={droppableId}
      >
        {
          items.map((item, index) =>
              <Draggable draggableId={value[idKey]} index={index} key={value[idKey]}>
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    id={value[idKey]}
                  >
                    <div>{item.name}</div>
                  </div>
                )}
              </Draggable>
          )
        }
        {provided.placeholder}
      </div>
    )}
  </Droppable>

I tried <div style={{display: 'none'}}>{provided.placeholder}</div> it's working fine on below the list but it's not hidding in rearranging item. Not able to pass the custom placeholder as well.

[alexreardon]

Right now the placeholder itself is not directly controllable. We tightly control when it is visible and how it animates in order to achieve a beautiful experience for users.

What is the effect you are looking to achieve by removing the placeholder?

[mtamilcse92]

Right now the placeholder itself is not directly controllable. We tightly control when it is visible and how it animates in order to achieve a beautiful experience for users.

What is the effect you are looking to achieve by removing the placeholder?

In my use case the placeholder component is completely different so i need to replace new placeholder component. If it's removable, i can add one temp placeholder object to the list and based on that i can render the placeholder component or based on the droppable position i can add the placeholer. So that is the intention of removing placeholder.
FYI
The main goal is to show custome placeholder. If you guys made custome props to the component that will be greatful.

[rpearce]

To accomplish this at the moment, here's what I am doing:

• figure out which item index is currently being dragged and where is its position
• figure out what are the item's dimensions
• dynamically transform a placeholder (it is styled to look like a droppable area) and adjust its offset and dimensions based on 👆 to achieve the effect. This also involves some CSS wizardry.

[chandlervdw]

@rpearce how do you apply styles to the placeholder? Wrap it in another element?

[rpearce]

@chandlervdw First off, 👋 from Charleston! I lived in Greenville once :)

The placeholder is nothing more than a temporary <div> that I render based on the info that something is being dragged, style how I please, and use CSS wizardry and math to figure out where it should go. It's completely silly, but it's what I had to do.

[rpearce]

If you want to know more, I can take a look at what I did in January/February and try to explain it better