https://github.com/github0013/react-beautiful-dnd-mobx
https://github.com/github0013/react-beautiful-dnd-mobx
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/github0013/react-beautiful-dnd-mobx
- Owner: github0013
- Created: 2018-02-28T03:20:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-28T03:48:46.000Z (over 8 years ago)
- Last Synced: 2025-06-10T15:49:21.878Z (about 1 year ago)
- Language: TypeScript
- Size: 5.86 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-beautiful-dnd-mobx
When to use mobx + react-beautiful-dnd, it doesn't work as expected if you just copy their sample.
## their sample
```jsx
render() {
return (
{(provided, snapshot) => (
{this.state.items.map((item, index) => (
```
## you would chage like this for mobx (this won't work properly)
```jsx
@mobx.observable items = [{id: "...", content: "..."}]
...
...
render() {
return (
{(provided, snapshot) => (
{
// mobx observable object here
}
{this.items.map((item, index) => (
```
The problem here is `this.items` (mobx observable object) is in a function call `(provided, snapshot) => ()`. When this function is called, `this.items` is not being observed, so that it breaks the react cycles.
## solution
https://github.com/atlassian/react-beautiful-dnd/issues/156
Extract the function call content into a class, and add `@observer` to it.
https://github.com/github0013/react-beautiful-dnd-mobx/blob/master/src/DraggableInternal.tsx#L7
Then call the component with props. * `items={this.items.dropPointA}` is mobx observable object
https://github.com/github0013/react-beautiful-dnd-mobx/blob/master/src/App.tsx#L49