How to properly run the npm package ?

[AvaterClasher]

The current documentation doesn't provide much context on how to properly use the npm package i tried running using the code sample provided in @beautiful-tree/react but i couldnt figure out the use of render() , i tried replacing it with return i got a svg printed out but without the values of the nodes. So what is the correct way of going forward i will try creating a proper documentation with all the stuff and a landing page for the package.
Thank You.

[castarco]

Hi @AvaterClasher .

---

Problem 1

The render function is used there for illustrative purposes (assuming that the reader already has experience with React), but it refers to the (now deprecated) render function from ReactDOM: https://react.dev/reference/react-dom/render (which has been replaced by https://react.dev/reference/react-dom/client/createRoot#root-render .

In any case, I'll try to improve the documentation to make it clearer.

---

Problem 2

To render what's inside the nodes of the tree data structure as text inside the nodes, you can pass the following prop (documented here https://github.com/Coder-Spirit/beautiful-tree/blob/main/@beautiful-tree/react/README.md#getnodecontent):

const t1 = <BeautifulTree
  // other props...
  //
  // This prop works for the concrete tree example presented in the README (as it accesses the `v` property).
  // All the optional chaining and `toString` calls are made to apease the TypeScript type checker, as it does
  // not know anything about the structure of the data inside the nodes.
  getNodeContent={(data) => data?.['v']?.toString() ?? ''}
/>

// In case you use pure JavaScript without type checking and you know for sure that the value will always be
// there, then you can simply write
const t2 = <BeautifulTree
  // other props...
  //
  // This prop works for the concrete tree example presented in the README (as it accesses the `v` property).
  // All the optional chaining and `toString` calls are made to apease the TypeScript type checker, as it does
  // not know anything about the structure of the data inside the nodes.
  getNodeContent={(data) => data.v}
/>

The text is not automatically rendered because we don't want to make assumptions about the structure of the data inside the nodes, that's why it has to be explicitly done with getNodeContent.

Same as in the other case, I'll take care of improving the documentation.