New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use cases for children component #139
Comments
Hi, I think we might want different type of inputs and several conditional renderings inside it. So, normally one does its own component, so it's very important to have this // Input.js
Let me know if you want to discuss it further. |
@jpggvilaca Can you share your project or, if it's private, make a repo with input-related code only? You have a very different kinds of inputs here. |
Hi! Ant D's datepicker is completely useless for keyboard input, and adding an input mask to the regular Input would be a great solution for that.
This is not supported at the moment as react-input-mask throws this: |
@slashrune Could you please make a demo at https://codesandbox.io? |
Thank you for your response! I have replicated an example here: |
@slashrune Thanks. The problem is that react-input-mask doesn't check if children's props are taken from Hence, the error message should be rewritten to make it clear if error is caused by |
Thank you for that! I am still trying to assess if there are other complications with Ant D at the moment, I will get back to you regarding the PR. |
Bootstrap input |
Some attributes aren't passed to the children in |
One use case of children is: |
Hi @sanniassin, I would also like to use Is there any way to fix it? |
@iloveip Here is an implementation with import React from 'react';
import InputMask from 'react-input-mask';
import { Input } from 'antd';
export interface InputProps {
mask: string;
placeholder: string;
disabled?: boolean;
onChange?: (event: React.SyntheticEvent) => void;
value?: string;
}
const InputComponent: React.FC<InputProps> = ({ disabled, onChange, value, mask, ...rest }) => (
<InputMask mask={mask} disabled={disabled} value={value} onChange={onChange}>
{(inputProps: any) => (
<Input {...inputProps} {...rest} disabled={disabled} />
)}
</InputMask>
)
export default InputComponent; But I would like to leave a doubt. @sanniassin
|
@italoiz Hi there, thank you for your reply. I would like to use |
Have someone a sample using material-ui InputBase? |
@annemacena The above example also works with Material UI. Only change the Antd component to the Material UI component. |
@italoiz For me your example doesn't work with Antd. See the link to codesandbox in my comment above. |
@iloveip see this Stackblitz example create with |
Okay, so, this sample didn't work for me. I'm using Formik, and Material-UI. BUT, it worked using like this: <InputMask
onChange={OnChangeFunction}
mask={maskVariable}
onBlur={onBlurFunction}
value={valueVariable}
name={nameVariable}
maskPlaceholder={" "}>
<TextField className={customClasses} fullWidth id={customId} />
</InputMask> |
Was anybody able to successfully use AntD's Everything else works well! It's just that the
|
All of these samples didn't work for me. I tried in two different ways 👎🏻 : <InputMask
mask="99.999.999/9999-99"
error={!!errors?.cnpj}
fullWidth
autoFocus
label={'CNPJ'}
>
{(inputProps: any) => {
return <TextFieldCustomizado {...inputProps} />
}}
</InputMask> So, I have this error: And with this way 👎🏻 : <InputMask
mask="99.999.999/9999-99"
error={!!errors?.cnpj}
fullWidth
autoFocus
label={'CNPJ'}
>
<TextFieldCustomizado {...inputProps} />
</InputMask> I have a runtime error: I'm using TextField of Material UI. I appreciate any help. Thanks. |
@LeonardoRochaLima try to follow this example on StackBlitz: https://stackblitz.com/edit/react-ts-u5u2rb?file=TextFieldMask.tsx |
Are sure that is correct? If I do exactly like this I still have a problem to building the application. |
Hello , i faced the same problem , i can't pass disabled property to the children , `` |
To solve a problem from this thread, I had to upgrade to react-input-mask-3.0.0. I also upgraded the @types/react-input-component@3.0.0 for typescript projects. To solve the children must be a function error, just wrap the custom input element in a function as such:
But after the upgrade, you can use custom input components without the function.
|
I can offer you temporary bad but working solution. import InputMask, { Props } from 'react-input-mask';
type TInputMaskCorrect = Omit<Props, 'children'> & { children?: () => JSX. Element };
const InputMaskCorrect: FC<TInputMaskCorrect> = ( { children, ...props }) => {
const child = children as ReactNode;
return <InputMask children={child} {...props} />
} now you have to use InputMaskCorrect similar to InputMask |
How to add a mask and not allow the user to enter space manually? <InputMask
mask={'### ### ####'}
formatChars={{
'#': '[0-9]',
}}
{...fieldProps}
maskChar=' '> |
I've got the same problem, and i solved this way:
Basically i turned off typescript using any because the library types seems wrong. |
|
It's not clear whether children components are mostly self made components from projects or third-party components from npm. That's why I need stats.
If you're passing another component as a children, please write what component you use (and what is the name of it if it's a third-party component) and why do you need to mix it with react-input-mask.
Thanks.
The text was updated successfully, but these errors were encountered: