Unform: Forward Ref to Styled Component Input with Typescript

[fmontone]

Description of issue

I'm trying to build a UI components LIB but I'm facing some difficulties with ref forwarding. Can't really understand how to forward ref to an input element on the example below:

Usage example

Have my Input created on my Lib with Styled Components.

import React from 'react';

import { StyledInput } from './styles';

const Input: React.FC = ({ ...rest }) => {
  return <StyledInput {...rest} />;
};

export default Input;

and have an UnformInput on my application, to get my Input styles:

import React, { useEffect, useRef } from 'react';
import { useField } from '@unform/core';

import { Input } from 'strings';

interface Props {
  name: string;
  label?: string;
};

type InputProps = JSX.IntrinsicElements['input'] & Props;

const UnformInput: React.FC<InputProps> = ({ name, ...rest }) =>{
  const inputRef = useRef<HTMLInputElement>(null);
  const { fieldName, defaultValue, registerField } = useField(name);
  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: 'value',
    });
  }, [fieldName, registerField]);
  return <Input ref={inputRef} defaultValue={defaultValue} {...rest} />;
}

export default UnformInput;

[diego3g]

Hello @fmontone, i didn't get exactly what you trying to do. Is the problem with the ref or the styles?

[fmontone]

Just wanna know in this situation where and how can I use forwardRef so it don't break.
Do I have to declare in my Unform Input, or in my original styled input component? Because I won't use my input with Unform in every situation, and wont receive forwarded refs in every situation too.
I'm just pretty lost on strategy for reusing my input and my Unform Input as well, all strapped with styled components, and any documentation on this could help.

[apteles]

Hi @fmontone, I think what you trying to do.

I'm supposing that you have two components:

1º An input that have only your styles.
2º Another component that receives this component styled.

Right, I'm suppos that your folders being like that:

The first one have the following code:

The component above, is responsable to have only styles. What I think about this aproach is, What if I decide use another component of form instead unform. clarlly we will have to change the component Input. To avoid this change we create a new component called inputForm.

In the second one we have this is to avoid the changes:

And when we decide use in another place we do this:

How you can see in image above, we use InputForm instead Input.

I hope that it help you.

[fmontone]

@apteles Hi Andre, thanx for the answer!

If you see my example, I was totally wrong about inputRef.

My real intention was to ask for a example documentation with forwardRef and styled components because of a miscomprehension of this hook in the time I created this issue. It could help people with less experience to stick with Unform.

Noob question, not well formed, but your example it's really rich so people can follow if struggles on that matter. In my case I went up using react-hook-form and I'm more comfortable with it.

Thanx bro! Cheers!