I'm using Material UI with React and I'm trying to build an input field that can display react components mixed with text. The reason is to be able to scan the text in the input field with a regex to find "variables". For example 'Hello, my name is $name'. I want to replace the variable with a material UI chip component.(Link)
To clarify how I want it to look like.
I have looked around for libraries and I've found that material-ui-chip-input does something similar but it doesn't look to be customisable to solve my issue.
Is there a way to render a react component in an input field or should I rethink how I should go about doing this? Any help is appreciated!
Related
Displaying a select box on click start in React DnD?
https://react-dnd.github.io/react-dnd/examples/nesting/drag-sources
I read the docs, but I don't see anything that allows me to show a select box. I am wondering if there's an easy way to do this, or I need to implement some low-level vanilla js code like the author of vi-select did:
https://github.com/Simonwep/selection/blob/01d781ead3768aa2e1b78489b0c88a0f2e9c3597/packages/vanilla/src/index.ts
Is there some solution in simple React?
I am using the react-autosuggest library to implement auto-suggestions functionality. I am pretty new to using this library. I went through the documentation, but it seems to be a bit confusing to me in certain things.
I tried to find answers to a few of the things:
What is the complete list of inputProps that can be passed to the component?
How can we open a dropdown with a list of a few default suggestions as soon as the user clicks on the input box instead of showing suggestions only when the user types in?
What exactly is the use of prop: multiSection when the data is of the form [{ name: '', flag: ''}] (just a sample) and we display only name in the dropdown list?
I found a lot of similar working examples using this library but wasn't able to get hold of the understanding properly. Seems like there are lots of missing points in the library documentation.
I found this one basic clean working snippet: https://codesandbox.io/s/react-autosuggest-example-with-hooks-forked-y7lkom. But was unable to add the dropdown functionality to it.
If anyone can help to get through this feature and some above queries, I would be highly thankful.
How to combine Ant Design Checkable TreeSelect functionality of autocompleting tree select with the ability of adding new tags based on un-listed input, that is provided in Select with mode="tags"? Btw, I need to use in JSON tree format as implemented in this example.
I'v tried to add mode="tags" option to <TreeSelect /> - it activates in-listed tags input, but crashes TreeSelect features.
I'v also researched that React guys think that it's not cool to have a "tags" mode in TreeSelect. Sry guys, but I need exactly that!) But I don't know how to implement this.
I'm new to react native.
I need to create the front-end part of an app used to manage products. In this app, a specific screen lets users add a "new product".
I've almost finished the UI part, but I now need to show errors to the user when something is wrong with its input (a missing product ID, a description with less than 10 characters, etc.).
Here's my objective: when the user clics the "publish" button, I check all the inputs. If the input is ok -> nothing happens, if the input contains an error -> the field turns red.
To achieve this, I need to work with states. Here should be an example for the title:
style={[style.inputText, {color: this.state.titleColor}]}
And I can change the state.TitleColor if something is wrong with the title input.
The problem is that I don't want to create a specific state for each input (titleColor, IDColor, descriptionColor, etc.).
How can I do a common state for inputs that are correct, and an other state for inputs that are wrong? I thought of using an array (with inputCorrect:[] ;
InputWrong:[]), but I do not know exactly how to deal with it.
Can someone help me? Thanks.
I'd recommend using a form library to help you with state and validation. I personally like formik, but I've heard good things about react-final-form as well (both are compatible with React Native).
Libraries like this make it easier to manage validation and input state, because they manage the state for you and tell each of your fields whether they're valid or not (passing appropriate error messages if needed).
It's still up to you to build the UI that displays the errors, but having the logic taken care of is a huge help. The formik docs have some good examples showing you how you would achieve your goal of changing a field color to red if that field has errors.
There is a bit of a learning curve to understand how to use these libraries well, but it's well worth it in my opinion.
I am trying to create a new html component using javascript and CSS.
The new component is exactly like TextField (<input type="text">).
The additional behaviour is each character in the TextField is separated in a box.
Is there any existing component available ? If not please give some ideas how to design this component.
Nothing exists in HTML for a multiple text input like you've described.
You'll need to build it yourself using multiple <input type="text"/> elements.
TextField(<input type="text"/><input type="text"/><input type="text"/>...)
Just out of interest though, why do you want this control? Typically this kind of field is horrible from a usability standpoint (even if you hook in event handlers to auto-tab you from one box to the next)
If you just want it to look like the characters are in boxes, you might be able to use a fixed-width font and a clever background graphic. Admittedly, this could pose some interesting internationalization challenges.
i would use a series of input boxes with a character limit of 1 and use CSS to make them 'square-like' to accomodate just one character