Revolutionizing Drag-and-Drop in React: Introducing Puck 8-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Revolutionizing Drag-and-Drop in React: Introducing Puck 8

Jan 23, 2025 pm 10:40 PM

Puck 0.18: The Next-Generation React Visual Editor is Here!

Get ready for a massive upgrade! Puck, the open-source visual editor for React, just launched version 0.18, featuring a revolutionary drag-and-drop engine with full CSS Grid and Flexbox support. This unlocks unprecedented design flexibility for your page builders and no-code applications.

Give Puck a star on GitHub! ⭐

This update eliminates previous limitations, allowing users to drag and drop any component anywhere on the canvas. Imagine the possibilities:

Revolutionizing Drag-and-Drop in React: Introducing Puck 8

Now, your users can create virtually any design imaginable—all without writing code. No more compromises; pure creative freedom awaits!

Puck 0.18 isn't just an improvement; it's a transformation into the ultimate design-in-browser tool. Its adaptability scales to your specific needs, from simple page-level blocks to highly granular visual layout builders for atomic components. Build websites, document editors, infographic designers—if it's built with React components, Puck can handle it.

Let's explore the key features:

(For detailed information, see the official release notes and changelog.)

Updating to Puck 0.18

Updating is easy! For new projects:

npm install @measured/puck --save

Copy after login

For existing projects:

npm update @measured/puck

Copy after login

No breaking changes mean a smooth transition! ?

Free-Form Drag and Drop

The new drag-and-drop engine is a game-changer. Previous versions had limitations, primarily restricting drag-and-drop to the vertical axis. While the DropZoneAPI allowed for multi-column layouts, manual component positioning was cumbersome.

Revolutionizing Drag-and-Drop in React: Introducing Puck 8

Now, freely drag and drop components in any direction. Puck provides instant visual feedback:

Revolutionizing Drag-and-Drop in React: Introducing Puck 8

Setting this up is simple. Style your wrapper DropZone as a grid or flexbox in your Puck config:

  Grid: {
    //... fields configuration
    render: ({ columns }) =&gt; (
     &lt;dropzone zone="my-grid"&gt;&lt;p&gt;This transforms the DropZone's div into a CSS grid, ensuring automatic alignment.  The same applies to flex containers.&lt;/p&gt;

&lt;h3&gt;Advanced CSS Layouts&lt;/h3&gt;

Previously, all Puck components were wrapped in a div, hindering direct descendant treatment within CSS grid or flex layouts.  The new `inline` parameter removes this wrapper, enabling expected behavior for rules like `flex-grow` or `grid-column`.

For example, create a customizable card grid using `grid-column` and `grid-row`:

```javascript
Card: {
  //... fields configuration
  inline: true, // Remove default wrapper
  render: ({ spanRow, spanCol, puck }) =&gt; {
    return (
      &lt;div&gt;
      &lt;/div&gt;
    );
  },
};

Copy after login

Users can build sophisticated layouts by adjusting editor fields:

Revolutionizing Drag-and-Drop in React: Introducing Puck 8

This also works with flex containers, creating responsive layouts:

Revolutionizing Drag-and-Drop in React: Introducing Puck 8

This empowers more ambitious layouts and interactive experiences.

Dragging Between DropZones

Drag components between any DropZone containers! Previously, dragging was limited to zones sharing the same parent. Now, move components seamlessly between siblings, nested children, or parents—no extra setup needed.

Revolutionizing Drag-and-Drop in React: Introducing Puck 8

(Use the allow prop on DropZone for component restrictions.)

Dynamic DropZone Height

DropZones now dynamically adjust their height to match their children, providing accurate render previews. Configure a placeholder height (minEmptyHeight) for empty DropZones to maintain consistent layouts.