Giter VIP home page Giter VIP logo

react-beautiful-dnd-grid's Introduction

react-beautiful-dnd-grid

🚨 Beware: this package is not production-ready. Feel free to file a PR. 🚨

Installation

npm i -S react-beautiful-dnd-grid

Demo

https://stackblitz.com/edit/react-beautiful-dnd-grid-demo

Demo gif

Usage

import React from "react";
import { ListManager } from "react-beautiful-dnd-grid";

const noop = function() {};

const list = [{ id: "0" }, { id: "1" }, { id: "2" }, { id: "3" }, { id: "4" }];

const ListElement = props => <div>id: {props.item.id}</div>;

const Component = () => (
  <ListManager
    items={list}
    direction="horizontal"
    maxItems={3}
    render={item => <ListElement item={item} />}
    onDragEnd={noop}
  />
);

react-beautiful-dnd-grid's People

Contributors

mathieueveillard avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-beautiful-dnd-grid's Issues

Drag and drop doesn't work in strict mode

I am getting error in browser console when strict mode is on. But it works removing the strict mode.

Uncaught TypeError: Cannot read properties of null (reading 'trySubscribe')

How can I make my div fill the entire width of the parent ?

Hi,

I'm trying to use react-beautiful-dnd-grid but i've a problem: my cards doesn't fill the space they should fill. I would like them to have a 33% width but their width fit with the content (there the id I send by props).

I tried to put some CSS properties on some divs, like the one containing the or the one containing my card, but nothing to do, they don't have the width I want them to have.

This is the result I have:

Sélection_001

And this is the result I would have:

Sélection_002

In my WidgetsContainer component:

<div>
      <ListManager
        items={sortedList}
        direction="horizontal"
        maxItems={3}
        render={item => <Widget title={item.id}/>}
        onDragEnd={reorderList}
      />
    </div>

Then my WIdgetsComponent:

<div className={'mb-4 px-2 min-w-full'}>
      <div
        className={
          'bg-white shadow-lg overflow-hidden rounded w-full transition-2 grow-hover'
        }
      >
        <div className={`w-full bg-blue-800 h-24 ` + css(styles.banner)}><p>{title}</p></div>
        <div className={'w-full p-2 h-48 bg-white'}/>
      </div>
    </div>

I hope you will be able to help me !
Thanks :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.