minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Custom style for each listitems element

BastienLairis opened this issue · comments

Hi @minop1205 and thx for your awesome work !

I need to have custom style for each listitems element, currently classes key is actually waiting for an object I need it to waiting for some sort of function to have access to my node props.

I tried several ways but without success 😢

function App() {
  return (
    <DndProvider backend={MultiBackend} options={getBackendOptions()}>
      <Tree
        tree={treeData}
        rootId={0}
        render={(node) => <div>{node.text}</div>}
        dragPreviewRender={(monitorProps) => (
          <div>{monitorProps.item.text}</div>
        )}
        // Actual behavior
        classes={{
          listItem: "bg-red",
        }}
        // what i would like to have
        classes={(node) => {
          return {
            listItem: `${node.text ? "bg-red" : "bg-blue"}`,
          };
        }}
      />
    </DndProvider>
  );
}

export default App;

Capture d’écran 2023-04-07 à 17 50 01