Passing props to the ReactFilestack element does not work as expected

[juho]

We're using rmwc components with material UI. This doesn't work as expected because of your tagMap:

import { Button } from 'rmwc'
<ReactFilestack
  componentDisplayMode={{
    type: Button
  }}
/>

As the ReactFilestack component only renders the button, optimally I would expect the API to be something like this..

import { Button } from 'rmwc'
<ReactFilestack
  component={Button}
  label='Upload a file'
  className='myclass'
/>

So, in your constructor, something like this:

    const {
      apikey,
      clientOptions,
      actionOptions,
      action,
      componentDisplayMode,
      // All other named props that you need
      ...rest
    } = this.props;

    this.componentProps = {...rest};

And in your render(), something like..

  render () {
    const Component = this.componentProps.component;
    return <Component name="filestack" onClick={this.onClickPick} {...this.componentProps} />
  }

[MowiliMi]

We don’t need add extra params, we can do that with customRender:

import "./App.css";

import ReactFilestack from "filestack-react";
import { Button } from "rmwc";
import "@material/button/dist/mdc.button.css";

function App() {
  return (
    <div className="App">
      <div id="inline"></div>
      <ReactFilestack
        customRender={({ onPick }) => (
          <Button label="Open picker" uneleted onClick={onPick} />
        )}
        apikey="your_api_key"
        actionOptions={{
          maxFiles: 10,
          imageMax: [3600, 3600],
          accept: ["image/jpeg"],
        }}
        onSuccess={(res) => console.log(res)}
      />
    </div>
  );
}

export default App;

[jakubpeksa]

Is it still happening in 4.0 version?