Is there any way to use the InputProps in <input /> element instead of <TextField /> of Material UI?
My Input.js component where I have used InputProps:
const Input = ({name, handleChange, type, handleShowPassword}) => {
return(
<input
name={name}
onChange={handleChange}
require
type={type}
InputProps={name === 'password' && {
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={handleShowPassword}>
{type === 'password' ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
),
}}
/>
)
}
export default Input
SignUp.js:
const SignUp = () => {
return (
<div>
<Input name="firstName" handleChange={handleChange} />
<Input name="password" type={showPassword ? 'text' : 'password'} handleShowPassword={handleShowPassword} />
</div>
)
}
export default SignUp
Please any help would be appreciated or feel free to share if there are any other ways to achieve the result.
My suggestion is you need to use Tailwindcss, and install tailwindcss/forms package.
I just found one tailwind component that are using
<input/>
for that functionality.
Here's the link for that : https://www.hyperui.dev/components/marketing/forms
Related
I have a custom radio button component in React looking like this:
export default function SingleSelectionButton(props) {
const {
values, name, required, errors, defaultData,
xs, md, register, infoBox, infoBoxContent, validateField } = props;
return (
<>
<Form.Group>
<Form.Label>
<FormattedMessage
id={name}
/>
</Form.Label>
{values.map((value) => (
<span key={value} className="SingleSelectionButton">
<input
{...register(name, { required: required}
id={name + value}
type="radio"
name={name}
value={value}
defaultChecked={defaultData.primary[name] === value}
/>
<label htmlFor={name + value}>
<FormattedMessage id={value} />
</label>
</span>
))}
</Form.Group>
</>
);
};
I call it like this, using an array for the different values:
<SingleSelectionButton
name="us_person"
md={6}
values={["yes", "no"]}
register={register}
required={true}
errors={errors}
validateField="no"
/>
The validation with required is working fine.
The problem is that I don't manage to validate a value in particular.
I have tried the following:
<input
{...register(name, { required: required, validate: value => value === validateField })}
id={name + value}
type="radio"
name={name}
value={value}
defaultChecked={defaultData.primary[name] === value}
/>
And also:
<input
{...register(name, { required: required, pattern: validateField })}
id={name + value}
type="radio"
name={name}
value={value}
defaultChecked={defaultData.primary[name] === value}
/>
So far no joy. What am I missing?
hello I'm trying to show and hide specific elements with checkbox material and what is happening now is when one checkbox is checked all the hidden divs are showing up.
You can see the problem here: https://stackblitz.com/edit/react-1ecdqb?file=demo.tsx
edit: I know that I need more variables in the state but I ask if there is a way to do it without state for each checkbox because there are gonna be 10 more checkboxes
const UninstallView = () => {
const [isChecked, setIsChecked] = useState(false);
const handleChange = event => {
if (event.target.checked) {
setIsChecked(true);
}
else {
setIsChecked(false);
}
}
return (
<div>
<FormGroup>
<FormControlLabel control={<Checkbox onChange={handleChange} />} label="simple isn't what I expected" />
{isChecked ? <TextField
id="filled-multiline-static"
label="What did you expect from simple?"
multiline
rows={4}
defaultValue=""
variant="filled"
/>
: '' }
</FormGroup>
<FormGroup>
<FormControlLabel control={<Checkbox onChange={handleChange} />} label="simple isn't working correctly" />
{isChecked ?
<div>
<h1>hello</h1>
</div>
: '' }
</FormGroup>
</div>
);
You are sharing 1 state across 2 checkboxes. You should have a separate state that holds the state for each checkbox.
This code may help:
const UninstallView = () => {
const [isFirstChecked, setIsFirstChecked] = useState(false);
const [isSecondChecked, setIsSecondChecked] = useState(false);
return (<div>
<FormGroup>
<FormControlLabel
control={<Checkbox onChange={() => setIsFirstChecked(!isFirstChecked)}/>}
label="simple isn't what I expected"/>
{isFirstChecked ? <TextField
id="filled-multiline-static"
label="What did you expect from simple?"
multiline
rows={4}
defaultValue=""
variant="filled"
/> : ''}
</FormGroup>
<FormGroup>
<FormControlLabel
control={<Checkbox onChange={() => setIsSecondChecked(!isSecondChecked)}/>}
label="simple isn't working correctly"/>
{isSecondChecked ? <div>
<h1>hello</h1>
</div> : ''}
</FormGroup>
</div>);
}
Sandbox example
Input in formik
Error in type of TextField
<InputMask
mask="99/99/9999"
value={formik.values.phone}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
>
{(inputProps: Props): ReactElement => (
<TextField
{...inputProps}
type="tel"
label={t("addDriverModal.phone")}
/>
)}
</InputMask>
Does not work. Props - type declaration from #types/react-input-mask
import { TextField, TextFieldProps } from "#material-ui/core";
import InputMask, {Props} from 'react-input-mask';
<InputMask
mask="99/99/9999"
value={formik.values.phone}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
>
{/*
'props' supplied to TextField weren't matching the required type.
Hence we use '&' operator which is for intersecting two types
*/}
{(inputProps: Props & TextFieldProps)=>
<TextField
{...inputProps}
type="tel"
label={t("addDriverModal.phone")}
/>
}
</InputMask>
I'm not sure how it works in TypeScript but you can do this.
/* Create Your Mask Component Like This */
const phoneMaskComponent = arg => {
const { inputRef, ...other } = arg;
const digitRegExp = /[0-9٠-٩۰-۹]/;
return (
<MaskedInput
ref={ref => {
inputRef(ref ? ref.inputElement : null);
}}
guide={false}
mask={strNumber => {
return strNumber.split('').map(() => {
return digitRegExp;
});
}}
pipe={str => {
const newStr = str
.replace(/[٠١٢٣٤٥٦٧٨٩]/g, d => d.charCodeAt(0) - 1632)
.replace(/[۰۱۲۳۴۵۶۷۸۹]/g, d => d.charCodeAt(0) - 1776)
.replace(/[^0-9]+/g, '');
return {
value: newStr,
indexesOfPipedChars: range(newStr.length * 2),
};
}}
{...other}
/>
);
};
/* Set The Mask in Your Input Component */
<InputBase
fullWidth
isLtr
name="phone"
label="Enter Phone Number"
type="tel"
value={formik.values.phone}
/* Use The Mask like This */
inputComponent={phoneMaskComponent}
/>
this mask dose not let user to enter En numbers.
i done that way and it works for me:
const MYInput = ({...props}) => (
<Field
name={props.name}
render={({field}) => {
return (
<InputMask
{...field}
mask={props.mask}
>
{(innerProps) => (
<TextField
{...innerProps}
variant={props.variant ? props.variant : 'filled'}
label={props.label ? props.label : ''}
/>
)}
</InputMask>
)
}}
/>
);
<MYInput name="Phone" label="Phone" mask="(99) 99999-9999" />
<TextField
margin='dense'
fullWidth
value={this.props.value}
name={this.props.name}
type={this.props.type}
error={this.props.error !== ''}
helperText={this.props.error !== '' ? this.props.error : ' '}
onChange={ e => this.handleChange(e) }
label={this.props.label}
variant= {this.props.variant}
id={this.props.name}
InputProps={{
endAdornment: (
<AccountCircle />
),
}}
/>
Is there any way to display different Icons based on Text field name? I mean, If the name is Email then display EmailIcon. If profile then displays AccountCircle.
here is a simple solution so you can start it from here
let icon = null;
if (this.props.name === "Password") {
icon = <Visibility />;
} else if (this.props.name === "Account") {
icon = <AccountCircle />;
}
return (
<div className={classes.root}>
<TextField
label={this.props.name}
className={classNames(classes.margin, classes.textField)}
InputProps={{
endAdornment: icon
}}
/>
</div>
);
here I have put the name as a prop in this component and depend on that prop I change the icon. you can change this to switch if you wish.
hope you got an idea.
here is a link of a demo: https://codesandbox.io/s/moo68122lp
You can do it in an elegant way, by abstracting like this:
import { AccountCircle, UserIcon, PhoneIcon } from 'some/ui/library';
const icons = {
account: AccountCircle,
user: UserIcon,
phone: PhoneIcon,
};
const FieldIcon = ({ name }) => {
const Icon = icons[name];
return Icon ? (<Icon />) : null;
};
const YourComponent = props => (
<TextField
margin='dense'
fullWidth
value={props.value}
name={props.name}
type={props.type}
error={props.error !== ''}
helperText={props.error !== '' ? props.error : ' '}
label={props.label}
variant= {props.variant}
id={props.name}
InputProps={{
endAdornment: (
<FieldIcon name={props.name} />
),
}}
/>
);
I've created this codesandbox - https://codesandbox.io/s/pk8p4lvl90
I can implement the material-ui instructions (https://redux-form.com/7.2.2/examples/material-ui/) fine without the mapping mechanism, but as soon as I apply the mapping I can't get the material-ui to implement the look for a textfield.
In my example I have commented out the code I have tried that works without mapping being involved.
Form -
<form onSubmit={handleSubmit}>
<div>
{/* <Field
name="firstName"
component={renderTextField}
label="First Name"
/>*/}
<FieldArray
name="firstName"
component={renderTextField}
label="First Name"
/>
</div>
</form>
TextField Render -
const renderTextField = ({ fields, input, label }) => (
<div>
{fields.map((newIntel, index) => (
{/* <TextField
name={newIntel}
key={index}
label={label}
placeholder={label}
component="input"
placeholder={label}
label={label} /> */}
<Field
name={newIntel}
key={index}
label={label}
placeholder={label}
component="input"
placeholder={label}
label={label}
/>
))}
<div
variant="fab"
color="primary"
className="jr-fab-btn"
aria-label="add"
onClick={() => fields.push()}
>
Click me
</div>
</div>
);
In order to use redux-form features with material-ui look, you need use redux-form's input component with render function that will return material-ui's component with appropriate props. You started doing so, but renderTextField should look a little bit differently, e.g.:
const renderTextField = ({
input,
label,
meta: { touched, error },
...custom
}) => (
<TextField
hintText={label}
floatingLabelText={label}
errorText={touched && error}
{...input}
{...custom}
/>
)
Having this, you can reuse it in, let's say renderForm function:
const renderForm = ({ fields, input, label }) => (
<div>
{fields.map((newIntel, index) => (
<Field
...
component={renderTextField}
...
/>
))}
...
</div>
);
That's based on what I've found in the redux-form Docs you linked. Take another look there as well, it's well described there as well.