Comments (3)
Hi @LukacTomas, thanks for reaching out. Is the goal here to create a custom component in your forms, or to use JSX to write Form.io components?
from react.
Well, I already can use JSX to write custom Form.io components. I have my own wrapper for Form.io ReactComponent and there I can use JSX to display my custom components. Maybe the problem with ReactComponent is that it extends Field.
I would like to use my own JSX component and somehow tell that component what components should it have.
Let's say I have:
{
"key": "MyCustomNesteReactComponent",
"type": "panel",
"label": "Custom Nested React Componenet",
"input": false,
"tableView": false,
"components": [
{
"label": "Text Field",
"placeholder": "Text",
"applyMaskOn": "change",
"tableView": true,
"key": "textField",
"type": "textfield",
"input": true
}
]
}
So in the end, MyCustomNesteReactComponent should be JSX component and I would like to tell it that it should have some children, in this case the textField (or whatever components I want).
from react.
- The formio.js renderer takes a JSON form definition and ultimately renders an HTML DOM tree to be displayed by the browser.
- The
ReactComponent
React component ostensibly allows you to write a form component - things like business logic, state, and some display concerns - in React, and then to "attach" a small React instance to a Form.io component instance so that when you include that component type in a form JSON definition, it will actually instantiate a tiny little instance of React and render your component that way. If possible, I would love to see how you're using this component, because I didn't really think it got a lot of use out in the wild. - To configure nested components (and I'm completely spitballing here), I imagine your
children
prop will be anotherReactComponent
that consumes the child JSON and itself and renders otherReactComponent
React components. I don't really think it would be possible the other way around (i.e. yourReactComponent
rendering regular old formio.js children likeTextField
or something), although maybe seeing how you're using this component in the wild would help us come up with some ideas.
from react.
Related Issues (20)
- ReferenceError: navigator is not defined in Nextjs HOT 3
- importScript Error while Drag and Drap New Text field HOT 7
- Bug: Component Style Not Applied Correctly HOT 1
- adding custom component to formio . HOT 5
- React is null in @formio/react src/components HOT 2
- [BUG] Warning for Custom Components above React version 18 HOT 1
- "window is not defined" error in Next.js 14 HOT 8
- Plugins don't support asynchronous functions HOT 4
- I am using FormBuilder in the react functional base component and am not able to re-render Formio Builder on state change.
- Using an external button and Hebrew name in API HOT 4
- Formio Builder configuration with accessibility HOT 3
- Address field does not pre-fill when passing data into submission object HOT 3
- Drop babel-polyfill
- Parse library for data collected by form?
- Wierd custom onSubmit behavior
- custom file component
- Add new variable are available in all scripts type data, row, component, instance HOT 1
- Feature suggestion of `Types` with the upcoming Hooks and original React components
- Validation errors not showing up for type day HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.