Custom style for each listitems element

[BastienLairis]

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;

[minop1205]

@BastienLairis Thank you for your feature request!

This feature was implemented in v3.5. It is currently available in the alpha version.

npm i @minoru/react-dnd-treeview@alpha

Among the classes properties, a callback function can be specified for listItem.

          <Tree
            {...otherProps}
            classes={{
              listItem: (node, params) => {
                return node.data?.fileType ? styles[node.data.fileType] : "";
              },
            }}
          />

For more information, please refer to the Storybook and CodeSandbox below.

CodeSandbox: https://codesandbox.io/p/sandbox/dynamic-class-name-ts-thrng9?file=%2Fsrc%2FApp.tsx

Storybook: https://minop1205.github.io/react-dnd-treeview/?path=/docs/basic-examples-dynamic-class-name--dynamic-class-name-story