[question] Custom components-registering @formio/react 5.1.1

0
closed
ivoscode
ivoscode
Posted 4 months ago

[question] Custom components-registering @formio/react 5.1.1 #404

Hello, Could you please point the right direction on how to make custom components. I was able to create and use component on FormBuilder but it does not render on the Form. It displays Unknown component: sliderCustomComp. It looks like it needs to be registered on the Form for it to be recognised but I don't know how.

Thanks,

  • Formio.js version: 5.1.1
  • Frontend framework:React

`import { ReactComponent } from "@formio/react"; import React, { useState } from "react"; import ReactDOM from "react-dom"; import settingsForm from "./Slider.settingsForm";

const SliderCustomComp = () => { const [value, setValue] = useState(0);

return (

<input className="w-full focus:outline-none" type="range" min="1" max="7" value={value} onChange={(e) => { setValue(e.target.value); }} /> {value}
); };

export default class Slider extends ReactComponent { /**

  • This function tells the form builder about your component. It's name, icon and what group it should be in.
  • @returns {{title: string, icon: string, group: string, documentation: string, weight: number, schema: *}} */ static get builderInfo() { return { title: "Slider", group: "Data", documentation: "", weight: -10, schema: Slider.schema(), }; }

/**

  • This function is the default settings for the component. At a minimum you want to set the type to the registered
  • type of your component (i.e. when you call Components.setComponent('type', MyComponent) these types should match.
  • @param sources
  • @returns {*} */ static schema() { return ReactComponent.schema({ type: "sliderCustomComp", label: "Default Label", }); }

/*

  • Defines the settingsForm when editing a component in the builder. */ static editForm = settingsForm;

/**

  • This function is called when the DIV has been rendered and added to the DOM. You can now instantiate the react component.
  • @param DOMElement
  • #returns ReactInstance */ attachReact(element) { return ReactDOM.render( <SliderCustomComp component={this.component} // These are the component settings if you want to use them to render the component. value={this.dataValue} // The starting value of the component. onChange={this.updateValue} // The onChange event to call when the value changes. />, element ); }

/**

  • Automatically detach any react components.
  • @param element */ detachReact(element) { if (element) { ReactDOM.unmountComponentAtNode(element); } } } Screenshot 2021-07-29 at 11 27 13 `