Unform: Unclear how to create custom input w/o ref

[pdlug]

Description of issue

I'm trying to create a custom inputs that use Slate.js, markdown lite, and other components that either don't provide ref or where it's unclear what ref is linked to. It's unclear to me how to provide the input value in these cases. The doc section on "Creating your own inputs" is blank.

Usage example

[diego3g]

Working on that, i'll try to update the docs this week. I'll also notify you here. If you don't wanna wait, my advice is that you need to store the value within a ref, something like:

export default function MyComponent({ name }) {
  const inputRef = useRef();

  const { fieldName, registerField } = useField(name);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: 'value'
    })
  }, [registerField, fieldName]);

  updateValue(newValue) {
    inputRef.current.value = newValue;
  }
}

Then, you can use the getValue, setValue and clearValue functions inside registerField to customize the way unform talks with your custom input.

[yarapolana]

Great that you are on it @diego3g I was just about to add a request for this today.
Any news so far?
Looking for more React Native examples.
I am trying to implement with a cellitem where user can select multiple options from a list on a modal. Any insight would be great. =)

[diego3g]

@yarapolana feel free to send new requests :)

For now, evertime that a custom input i'm using React refs, something like this:

function MyCustomInput({ name }) {
  const inputRef = useRef({ value: '' });
  const { registerField, fieldName } = useField(name);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      getValue(ref) {
        return ref.value;
      },
      setValue(ref, value) {
        // do something with value if needed
        ref.value = value;
      }
    })
  }, [registerField, fieldName]);

  return (...)
}