I’m new to react and I’m connecting a react front end to a flask backend. I’m in a group project but I’ve been somehow responsible for 90% of the work. I’ve implemented the fields with MUI but I’m flexible and prefer working over appearance.
I made a form with react-form-hooks and tried to implement a custom range slider (I’m sorry that it’s not all broken out to components and is mainly single file). I’m new to React, JS and TSX (there’s a sandbox at the bottom of the post).
*Side-note: the form is loading pretty slow right now, any tips on improving performance would be greatly appreciated. (:
(Actually at this point appreciative for any ideas and open to feedback).
Advanced Search Form
What I am trying to achieve:
I am trying to take input as a range of values from 0 to 100 in a form. The values can be passed as [0,100] on default or if they are updated, on pressing submit the current values ([min, max]) of their state would be submitted. The information would be passed as a json response to an api backend through a post request.
I found some options online on implementing a range slider with react-hooks-form but could not get any of them to work unfortunately. Could someone please help me implement the range slider (I will need to use 3 of them in my form)?
If this is not possible, could you please assist with one of the following alternatives:
Option 1: Setting up a select box/combo-box that does the following:
Provides the user a max or min option based off the corresponding max/min option. I.e. if there is no input in either the Max or Min select/combo-box: Then both boxes would have 0-100 as the possible range of values. If the value of one box was touched: then the second select/combo fields values would be of the corresponding remainder of the range.
E.g. If I selected 70 for my minimum value my other select/combo would provide for me to either leave it blank, or give me the options 70 to 100. Or if I selected 82 for the max input field- the select for min would only allow me to use 0 to 82 for my min or leave it blank.
Option 2:
Text input fields with the same validation schema as above that would become an error state if the user entered something like:
artist-rating min: 40
artist-rating max: 20
Here is the sandbox:
https://codesandbox.io/s/advanced-search-form-forked-0lhgrv
Thanks for updating the post.
You problem is that Mui Slider Component, doesn't take the default input props, so you can't spread the register method returned by react-hook-form since it returns the default value and onChange props.
But react-hook-form is a great library and it already addressed the integration with the main react UI libs: https://react-hook-form.com/get-started#IntegratingwithUIlibraries
I implemented a basic example here:
https://codesandbox.io/s/wonderful-silence-9qlfbj?file=/src/App.js
They expose quite extensive and clear APIs, take your time to study them if you plan to use it as your form management library.
Related
I have a web form which has the user input the values of certain characteristics, however some of the characteristics have up to 45000 values.
The selects were working earlier, albeit with a slight amount of lag when populating the dropdown and trying to scroll through it fast, but now it does not populate at all and the web form hangs.
Is there a way to efficiently contain this many values into a dropdown? Also which is the best library for searchable comboboxes?
I looked at this implementation as it has a "load on open" feature which I thought might be beneficial, but it did not seem to work and is no longer actively developed.
http://john-oc.github.io/
Thanks
Perhaps it would be better to use an autocomplete feature instead of a select menu in this case. A user can type in the first few characters, causing a request to start filtering results based on their input.
Here are a couple of really good autocomplete plugins:
https://github.com/devbridge/jQuery-Autocomplete
Roll your own:
http://www.webreference.com/programming/javascript/rg16/index.html
I agree with Todd, I think you might want some solution that has autocomplete to hide too many results. I'd even go a step further and suggest bootstrap DataTables: https://datatables.net/manual/styling/bootstrap
You can make searchable tables with this, with the key advantage being that it paginates results, so you don't see it all at once.
I'm a big fan of https://github.com/angular-ui/ui-select. You can have it make a request based on the current text input, and then populate the dropdown.
Since the question is already answered, please let me just contribute here.
You can use the typeaheads from angularStrap to achieve this. Beyond the easy manipulation of data, you can even use to make async calls using data provider.
I have a large data which should be dropdown values in a multiselect.
I tried using http://dotansimha.github.io/angularjs-dropdown-multiselect/#/
But it is taking too long to load.
Please suggest a perfect way to implement this..
I haven't used the component you're using, but the best way to implement a dropdown with huge amount of data is by using server filtering and minLength, in general:
Min length means that you start showing suggestions after he has typed e.g. 3 letters.
Server filtering means that you run a query per letter to the server, to show the suggestions needed for the dropdown. select * from people where name like '%' + value + '%'
I have created one web application to produce graph using php, mysql and highchart. All input selection for graph is drop down there are 4 input fields along with date range. it was working fast when the table has less data. Now the table has around 700 MB data so it is not working fast. Then we decided to move select2.js here it is working better. But still some what performance we need... now it takes 16 sec to bring drop down value.
Anyone could you please suggest me how will i get faster performance with select2.js file. if select query has to be optimized according to that please guide me to do that also. Following is the query to take distinct value,
select distinct client from global_stats
I have a table with many entries (4000 - 5000) with 5 columns. These are paginated and only about 20 rows are shown at a time although all data exists at the client side.
I want the user to filter different column by categories (and if possible using some wildcards), this user input will be taken using something like Form input. Note that i can perform all the operations using Javascript code, however i am unable to understand what kind of UI elements do i need to use for this purpose (I am not from a web dev. background but learning the tricks). I tried using libraries such as selectize, researched some Jquery UI plugins. In fact i also found a spreadsheet specific library (slickgrid.js) but it is slightly beyond my skill to implement.
So in essence is there a simple way to get user input to select categories in a column(s) with all data in client array ? I would love to reach a stage where i may be able to group column categories and use them to give autocomplete/ dropdown menus etc. However i am just trying to figure out a reliable way to translate user input to string to be used in code.
I am looking for a numeric spinner that has a property for incremental value (.25, .5, .75), supports auto-rounding in case someone types in a value (or an change event), max and min ranges, and support for custom images would be great.
This is a sample/demo of the page with the controls I plan on using http://jsfiddle.net/NwHGw/. I plan on adding a spinner to the lunch input box. I'm fairly new to JQuery so if this is a matter of just tying together a few different techniques please let me know. The plugin that is being used in this sample is jQuery Time Entry by Keith Wood.
Thanks for your help
Update (12/6 9:22 PM EST):
I have made an update to the code http://jsfiddle.net/NwHGw/1/. I was wondering what everyone thought of this implentation. The box I'm having issues with is the 'Lunch' box. It was originally going to be an decimal (1, 1.5, 2.25, ect), but if I use the same plugin as the time controls then I can specify the input as HH:MM, set the type to 24H and limit the input to say 00:00 to 03:00 and keep the rest of the logic the same. I can then do the decimal conversion on the backend.