Skip to main content

useCombinedRefs

Importing useCombinedRefs Hook​

import { useCombinedRefs } from '@ciceksepeti/cui-hooks';

Example​

tip

To use useCombinedRefs efficiently we highly recommend you to read Forwarding Refs reference page from ReactJS Documentation Page.

forwardRef Area​

import React from 'react';

const ForwardedRefInput = ({ type, onKeyDown, placeholder }, ref) => {
  return (
    <input
      ref={ref}
      type={type}
      onKeyDown={onKeyDown}
      placeholder={placeholder}
    />
  );
};

const forwardedInput = React.forwardRef(ForwardedRefInput);

export default forwardedInput;

combinedRef Area​

import React, { useRef, useEffect } from 'react';
import { useCombinedRefs } from '@ciceksepeti/cui-hooks';
import ForwardedRefInput from './ForwardedRefInput';

export const Example = () => {
  const nameRef = useRef(null);
  const submitRef = useRef(null);
  const ref1 = useCombinedRefs(ForwardedRefInput, nameRef);

  const firstKeyDown = (e) => {
    if (e.key === 'Enter') {
      lastnameRef.current.focus();
    }
  };

  const submitKeyDown = (e) => {
    if (e.key === 'Enter') {
      alert('Submit button has been called!');
    }
  };
  return (
    <div>
      <ForwardedRefInput
        type="text"
        ref={ref1}
        onKeyDown={firstKeyDown}
        placeholder="First Name"
      />
      <button ref={submitRef} onKeyDown={submitKeyDown}>
        Submit
      </button>
    </div>
  );
};

Preview & Test​

PREVIEW & TEST AREA
useCombinedRefs

  • Combines all passed props

  • Usefull when React.forwardRef and internal ref is needed at the same time

  • To skip next input and button elements please hit Enter on your keyboard.