I'm somewhat new to react, but the project I'm working on requires various polygon-shaped components, where each vertex of the shape should contain a blank input field where the user can input text.
I considered using D3's Radar-chart, an example can be found at this link. http://bl.ocks.org/chrisrzhou/2421ac6541b68c1680f8.
Is it possible to create a component like this from scratch in react?
Related
I am working on an application having nested forms. I am confused about which of them is best. I worked on react-reactive-form and it fulfils all the requirements of my app but has some issues with nested structure, especially with FormArray(to add new, prefill form array and delete the array element from a particular index). Basically, I need to do some extra code to achieve these.
After this, I saw lots of people using "Formik", especially when working with React. I'm new to Formik, I didn't know whether it's better in performance or not. Also, I didn't see any article that explains their technical performance part.
There is just a downloads comparison I found:: https://npmtrends.com/formik-vs-react-reactive-form
Formik: https://github.com/jaredpalmer/formik
React Reactive Form: https://github.com/bietkul/react-reactive-form
or React Hook Form:: https://www.npmjs.com/package/react-hook-form
My requirements:
need to use multiple and nested form structures inside my application.
require form validations of change, on blur or submit
handle data in the array where I can add new items dynamically, and also delete, add and update anything.
Most important:: Can pass controls to another component as reactive form does. This means if we want to create a form in the parent and then subdivide the form sections into components where we can pass that section form field controls to the child component and still after on change can get complete form values at one place that is at parent component.
Which of them is best in terms of performance, and can achieve all the parts easily I have mentioned.
use react-bootstrap for Form, Input, Button, etc
I'm looking for a method to create well styled word document using ReactJs.
More information.
I've designed a layout in the exact same size of an A4 sheet. There are input boxes that users can input the information to that layout. after entering all the required information. I need to provide a method to export the current layout in to a Ms Word (.doc or .docx) document.
I've attached an image (taken from the internet) to show what kind of layout that I'm creating in React. I need the same to be in the word document with exactly the same styles.
Example Layout
Hoping a solution, thank you. 😇
I am working for a software house, on our the first large scale React project. We are using React 17, everything is a function.
We have a form that comprises of a few hundred input fields. We are rendering this form using Material UI's TextField, KeyboardDatePicker, and Autocomplete components. This form handles presentation of XML messages that are exchanged between end points. There are 20 of these XML messages and many fields (and collections of fields) are common. For example, there is a field called MessageID that appears in all XML messages, and a field group called "Header" that comprises of a few fields like MessageID . MessageDateTime, MessageSender, etc.
So the first thing we did was to create UI components that encapsulate the presentation of these common components so that we can reuse then in all 20 messages. Also, we use custom hooks to do the validation, on the component site. This is to aid re-usability. Having the validation on the form level would mean that the component can't know how to validate itself.
So what we want to do is to trigger validation on the form level, delegate validation to all children, and if all goes well, submit the form.
The question is whether this is the "right" way to do it in react. And is this a react way of thinking? And if it is indeed an acceptable react pattern, what is the best way to do this?
We are asking since extensive google search on "trigger child validation react forms" doesn't bring back any meaningful results, in what I personally believe is a basic framework need, ie delegate validation to components and await for the results. Only react-hook-form offers something similar here https://react-hook-form.com/api/useform/trigger
I'm using dagre-d3 library for creating a flow path. I need to have custom component for every label but its not rendering react components, it however does render properly if the label is simple html. What do I need to do?
Following is a sample of what I'm trying to achieve, the first node should be the component but its rendering a simple empty box in place of that:
CodeSandbox URL
I can't seem to reuse my reusable React Dropdown I made. heres a gif.
I've tried setting different styles with random numbers as the values, I've tried using IDs. Adding classes etc.
Here's the React element (tsx)
https://hasteb.in/ilohiyef.kotlin
Here's the styles for it
https://hasteb.in/cimiyuda.yaml
And here's the code I used in the other file (the faulty one)
https://hasteb.in/ohocajal.xml
And here's the working dropdown
https://hasteb.in/etobapib.xml