Custom Component - How to use ?

[mrbarletta]

I couldn't find any information for react on how to use the custom component, any hint?

[rankin]

I'm trying to figure this out myself @mrbarletta. If/when I figure it out I'll let you know.

[mrbarletta]

great! this project needs some love! :)

[pupretiDev]

Has anyone come up against any kind of solution?
If we do create a custom component as shown in the link,
'https://github.com/formio/react-example/blob/master/src/app.jsx'
below code (line no 10 in above link) creates error of type "Cannot set property 'checkio' of undefined":
FormioComponents.checkio = require('./components/checkio.js');

My questions are:

1. How to solve above error?
2. What file works as renderer inside react-formio npm module?
3. And therefore how to register this with the form renderer of react-formio?

[Aiso786]

I'm doing this:
import { Formio as FormioCore } from 'formiojs/full';
import { CustomSelectComponent } from '../../../controls/custom-formio/components';

FormioCore.registerComponent('custom-select', CustomSelectComponent);

But i get an error on this line in 'formiojs/build/components/Components.js' (line 457):
component.visible = false;
'component' is undefined. So i am stuck too :(

[ablock]

The approach suggested by @Aiso786 above worked for me. I was able to duplicate the ES6 code of one of the stock components, change its class name and the name of the key string in the constructor, like this:

this.type = 'customComponentName';

And then import and register the component in the React app's componentDidMount() function.

[randallknutson]

Looks like everyone figured it out. This approach will work with the 1.x version. In 2.x and later we depend on formio.js to render the form so the approach to build custom components is different. Here is how to do it in 2.x and 3.x branches https://gist.github.com/travist/59fa77086ec899e24992fc1508e61075

Note: The 4.x branch will change again (for the last time!) to support custom templating, SSR and better attaching of events.

[chinmayek]

how to have react-formio custom component?

[tk-ringier]

@randallknutson - do you know how to create custom component with react-formio?

[wag110894]

Hello Tk,
Have you seen this documentation? https://help.form.io/userguide/form-components/#custom

Please let me know if you have any further questions or concerns.

Thanks,
William Gay
Form.io Support

[tk-ringier]

@wag110894 - thank you for the link. I can see there angular example, am I right? Can I find somewhere react example?

[randallknutson]

You can see an example of a custom component in react like this: https://github.com/formio/react-app-starterkit/tree/3.x/src/components

[IniZio]

I feel like generating a unique element and render a react element to it, and then using something such as observable for syncing value in getValues and the element might be better?

[wag110894]

Hello IniZio,

Can you please open this in a new chain. This issue has been non-responsive since March.

Thanks,