I'm using this React auto-suggest address component like this:
<Geosuggest
name="adresse"
onSuggestSelect={this.onSuggestSelect}
onBlur={this.onSuggestSelect}
autoComplete="on"
/>
It works nicely but I'm wondering how can I render a Material UI input instead of the one rendered by the library.
Otherwise, is there any way for me to retrieve the className applied to an input? For instance: MuiInput-input-72 MuiInput-inputSingleline-79
Also, I'm using next.js so SSR is important so I can't easily play with style but className only.
Related
My team and I have been using Antd a react component library. I was asked to connect google.map's Places library to an input field so we can get an easy address drop-down list.
The problem is the Antd's input component is wrapped up under the hood. So when I click on an address from google.maps Places menu it appears in the input field for a milli sec then disappears.
I tried all the event.preventDefault(), event.stopPropoagtion(). Is there any trick to combining google.maps places returned data with a well nested react-ui component?
(too long for comment)
I have the exact same problem.
I'm using NextJS with functional component and #react-google-maps/api library.
The workaround I use: simple <input> element combined with the right CSS class to make it look like the Antd <Input>.
Like this:
<LoadScript
googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY}
libraries={libraries}
>
<Autocomplete
onLoad={(autocomplete) => setAutocomplete(autocomplete)}
onPlaceChanged={onPlaceChanged}
restrictions={{ country: "fr" }}
fields={['geometry.location', 'formatted_address']}
>
<input
type="text"
placeholder="Enter your address"
className="ant-input"
/>
</Autocomplete>
</LoadScript>
This way, when clicking on an address from Places menu, its value stays in the input field.
If anyone has a better and less hacky solution, I'm looking for one!
This is a very simple matter of state management. It sounds like the google-places input field was working correctly or it wouldn't have shown up at all. If your input field is connected to let's say Reactjs then you will need to add the google-places response data to your state-management and it should stop disappearing. This happens a lot when companies use custom state-management systems.
I'm fairly new to React and started checking out React-Bootstrap and the way the components are styled. The documentation clearly styles components with variant:
<Button variant="primary">Success</Button>
However, this code seems to work just as well with the traditional className. Functionally, and aesthetically, if I change the above code to something like,
<Button className="bg-primary">Success</Button>
the output is the exact same. Personally, I find using the className attribute much easier as I can write vanilla bootstrap classes like btn btn-primary... instead of different react-bootstrap classes.
Is there any functional difference between the two and is there a reason to use variant over className?
The difference between variant and className:
Variant:
- uses only pre-defined classes
- no need for an external library
className:
- can use custom classes
- works the same as the HTML attribute class
I personally use className
I personally don't use React-Bootstrap, preferring to include the CDN to Bootstrap and apply classes to my own components using className.
As far as I can tell, there is no functional difference between both methods.
Variant is a prop for your React-Bootstrap components which wrap the various predefined styles for the different bootstrap components. You can't customise a React Bootstrap component using a variant(if you want to deviate from bootstrap's theme).
ClassNames are your normal CSS classes wherein you can add any style to components through CSS. The reason className="bg-primary" would work because React-Bootstrap has the bootstrap's css file included as part of the library.
this is the bootstrap Button Component:
const Button = props =>{
const variant = props.variant?`btn-${props.variant}`:""
return(
<button className={`btn ${variant} ${props.className}`}
onClick ={props.onClick}>
</button>
)
}
I use Fabric components written in React + Typescript and when using Checkbox component I can add custom attributes such as data-id and so on - this is written also on documentation: https://developer.microsoft.com/en-us/fabric#/components/checkbox
Whats the problem ? I do not know how to add one by passing it to inputProps.
Interface of React HTMLAttribute for field data require string value.
From what I see there interface of React's HTMLAttribute is generic one and Checkbox component passes this interfaces there: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/global.d.ts - They are empty.
Does somebody know how to implement the data- attributes there ?
In most cases where an interface extends React.ButtonAttributes we filter out all the valid button props (aria included) and pipe them in. Seems this component never got updated to use that approach and is still using an older approach where we put all of those props into 'inputProps'.
<Checkbox
label="Standard checkbox"
inputProps={{'data-foo': 'bar'}}
ariaDescribedBy={'descriptionID'} />
https://codepen.io/micahgodbolt/pen/djNGQv
When trying to hide an input tag in regular html you can use the following:
<input hidden />
and when you want to show the tag we use:
<input />
Apparently in the return portion of a react component you can do the following to hide an element:
<input hidden={true} />
I can't find any documentation for this. Could someone direct me to a source?
Any standard or custom DOM attributes are fully supported according to the docs, just camel case them and react will put the corresponding attribute in the actual dom.
https://reactjs.org/docs/dom-elements.html
you may also find it helpful to read the intro to JSX since there may be confusion there.
https://reactjs.org/docs/introducing-jsx.html
Lastly just being nit picky <inpupt /> is a react element not a react component.
Difference between React Component and React Element
Some material-ui components have errorText as a prop which we can use to show errors, But, doing that in react become lot complex if my form has large number of field components.
Please suggest the best way to handle client-side validation with material-ui comonents.
I think your issue is that you have to manage a lot with state/store. In react validation is complex because of one-way binding.
This library https://github.com/vishalvisd/react-validator is one which I found that supports material-ui component validation. Though in general you may use this to validate any component.
I would suggest using some HoC (Higher-order Component) approach. I tested many solutions for form validation in React JS, the one that I always choose is: react-validation-mixin. Take a look at this example.
Example of the standard input:
<input
type='text'
placeholder='Username'
value={this.props.username}
onChange={this.onChange('username')}
onBlur={this.props.handleValidation('username')}
/>
In this example value of that input comes from props (example with Flux implementation) and that's probably what you aim for too (lots of inputs).
onChange will need to handle value change so that this.props.username gets updated too and onBlur will trigger validation check (so that the error will show up once user leaves the input).
In order to get the error message, use: this.props.getValidationMessages('username')
It's a universal solution and you can use it in different libs. But taking TextField from material-ui, as you asked:
<TextField
floatingLabelText="Username"
value={this.props.username}
errorText={this.props.getValidationMessages('username')}
onChange={this.onChange('username')}
onBlur={this.props.handleValidation('username')}
...
/>
Remember to use HoC with your component: export default validation(strategy)(UserLogin) That way, you will get all the necessary helper methods in props.
If you are using Redux in React project, redux-form give you a simple way to implement form validation.
Check this out: http://redux-form.com/6.4.3/examples/syncValidation/