search

tajo / react-movable

🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
https://react-movable.pages.dev
MIT License
1.53k stars 51 forks source link

Cannot be used with HOCed components #14

Closed rassie closed 5 years ago

rassie commented 5 years ago

I'm trying to use react-movable with Material UI (e.g. List component) and fail at that. The main problem seems to be that Material UI wraps its components in a HOC for styling, which does not have a children property, which react-movable expects to exist. Replacing a component with HTML-like components like <ul> works more or less as expected, however can't be a solution in a component world.

tajo commented 5 years ago

The problem is that material-ui is not correctly forwarding refs. However, it has an alternative API called innerRef (https://material-ui.com/customization/css-in-js/#withstyles-styles-options-higher-order-component). You need to pass the ref into it.

tajo commented 5 years ago

v4 will start forwarding refs https://next.material-ui.com/guides/migration-v3/#core

rassie commented 5 years ago

Thanks, I'll look into it!

rassie commented 5 years ago

For the history: I haven't been able to use innerRef for this, but with RootRef it's working fine. It looks like this (List is Material-UI's List):

<RootRef rootRef={props.ref}>
    <List {...props}>{children}</List>
</RootRef>