react-sortablejs
react-sortablejs copied to clipboard
Published
20 hours ago •
SortableJS
SortableJS
How to pass props using Custom Component
I'm running into a situation where I need to pass a prop to the CustomComponent. I've looked through the documentation and I couldn't find a solution, I'm hoping you guys know something and I might have missed it.
import React, { FC, useState, forwardRef } from "react";
import { ReactSortable } from "react-sortablejs";
// This is just like a normal component, but now has a ref.
const CustomComponent = forwardRef<HTMLDivElement, any>((props, ref) => {
// grandProp needs to be used here
const someFunc = () => props.granProp
return <div ref={ref}>{props.children}</div>;
});
export const BasicFunction: FC = ({grandProp}) => {
const [state, setState] = useState([
{ id: 1, name: "shrek" },
{ id: 2, name: "fiona" }
]);
return (
// how to pass grandProp to custom tag?
<ReactSortable tag={CustomComponent} list={state} setList={setState}>
{state.map(item => (
<div key={item.id}>{item.name}</div>
))}
</ReactSortable>
);
};
If there's no solution, then I'll fork, and create an option that passes props, that could look something like this
<ReactSortable
tag={CustomComponent}
list={state} setList={setState}
passProps={{grandProp}}>
...
<ReactSortable>
The tag prop type is ReactHTML. The only possible values are HTMLAnchorElement. Does not admit ReactComponents. You can add it wrapping ReactSortable.
I need too, wrapping is not a good idea, some scene do not need wrapping elements.
