Custom React component from NPM? How?

Hi, a new user here.
I'm trying to build a custom component - Sortable Tree using a React component from the NPM module.

My steps:

  1. I have added the https://cdn.jsdelivr.net/npm/react-sortable-tree@2.8.0/dist/index.cjs.min.js to the libraries
  2. Created a custom component

I cannot figure out how to add the react component to the custom component in Retool.
It seems like import SortableTree from 'react-sortable-tree'; doesn't work? But I'm not sure.

Can anyone copy/paste an example of using a 3rd party React component in the custom component tool in Retool?

Hi versus, this is an example of a custom component we used from antdesign. Hope it helps.

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://unpkg.com/antd@4.15.0/dist/antd.css"></script>

<script src="https://unpkg.com/antd@4.15.0/dist/antd.min.js"></script>

<div id="react"></div>
<script type="text/babel">
  const { TreeSelect } = window.antd;
  const { TreeNode } = TreeSelect;
  let myState = { value: undefined };

  const onChange = (value) => {
    console.log(value);
    myState = { value };
    console.log("mystate", myState);
  };
  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
    <div>
      <TreeSelect
        showSearch
        style={{ width: "100%" }}
        value={myState.value}
        placeholder="Please select"
        allowClear
        multiple
        treeDefaultExpandAll
        onChange={onChange}
      >
        <TreeNode value="Carpinteria" title="Carpinteria">
          <TreeNode value="Beni" title="Beni" />
          <TreeNode value="Miguel" title="Miguel" />
        </TreeNode>
      </TreeSelect>
    </div>
  );

  ReactDOM.render(<MyCustomComponent />, document.getElementById("react"));
</script>

I really need this antd tree select in the app that I am working on. For whatever reason, I am unable to access the Model variables like normal using this example.

I am following this other tutorial and it works just fine: https://docs.retool.com/docs/custom-react-components

But, then when I attempt to access the model.name variable from within this example it fails

The only difference that I can see is that we're switching from react.product.js to react.development.js. Is something else different about the way that models are passed in? Help!

The goal here, by the way, is to pass the data from a query into this tree select. If anyone has details on how that is done that would be very helpful! Thanks.

Hey osmcgraw!

 I do think that there is something different about how those libraries work. I've made this work by using different cdn links for React and ANTD. Let me know if this setup doesn't work for you!