How to use the forwardRef function from react

Button.js

GitHub: Stremio/stremio-web

2
3
4
5
6
7
8
9
10
11
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const styles = require('./styles');

const Button = React.forwardRef(({ className, href, disabled, children, ...props }, ref) => {
    const onKeyDown = React.useCallback((event) => {
        if (typeof props.onKeyDown === 'function') {
            props.onKeyDown(event);
        }

129

501

31

TVFocusGuideView.js

GitHub: react-native-tvos/react-native-tvos

124
125
126
127
128
129
130
131
132
});

const ForwardedTVFocusGuideView: React.AbstractComponent<
  TVFocusGuideViewProps,
  React.ElementRef<typeof View> & TVFocusGuideViewImperativeMethods,
> = React.forwardRef(TVFocusGuideView);
ForwardedTVFocusGuideView.displayName = 'TVFocusGuideView';

module.exports = ForwardedTVFocusGuideView;

108

594

27

constants.js

GitHub: esxjs/esx

5
6
7
8
9
10
11
12
13
14
const noop = () => {}
const REACT_PROVIDER_TYPE = Provider.$$typeof
const REACT_CONSUMER_TYPE = Consumer.$$typeof
const REACT_MEMO_TYPE = memo(noop).$$typeof
const REACT_ELEMENT_TYPE = createElement('div').$$typeof
const REACT_FORWARD_REF_TYPE = forwardRef(noop).$$typeof
const VOID_ELEMENTS = new Set([
  'area',
  'base',
  'br',

14

647

10

index.js

GitHub: futpib/pagraphcontrol

0
1
2
3
4
5
6
7
8

const React = require('react');

const r = require('r-dom');

const forwardRef = () => Component => React.forwardRef((props, ref) => r(Component, {
        ...props,
        __forwardedRef: ref,
}));

15

252

8

index.md?plain=1

GitHub: magicdawn/magicdawn

50
51
52
53
54
55
56
57
58
59

const FooComponent = props => {
  return <div ref={props.theref}>the FooComponent</div>
}

const wrappedFooComponent = forwardRef((props, ref) => {
  return <FooComponent theref={ref} {...props} />
})

const r = createRef()

3

24

6

+ 5 other calls in file

forward-ref.js

GitHub: iMoses/react-decorators

2
3
4
5
6
7
8
9
/**
 *
 * @returns {function}
 */
module.exports = function forwardRef(Component) {
    return React.forwardRef((props, ref) =>
        <Component {...props} forwardedRef={ref} />);
};

2

5

2

Video.js

GitHub: ppalves/stremio-web

4
5
6
7
8
9
10
11
12
13
const classnames = require('classnames');
const { useLiveRef } = require('stremio/common');
const selectVideoImplementation = require('./selectVideoImplementation');
const styles = require('./styles');

const Video = React.forwardRef(({ className, ...props }, ref) => {
    const onEndedRef = useLiveRef(props.onEnded);
    const onErrorRef = useLiveRef(props.onError);
    const onPropValueRef = useLiveRef(props.onPropValue);
    const onPropChangedRef = useLiveRef(props.onPropChanged);

129

0

0

ReactNewContext-test.internal.js

GitHub: hankzhuo/learn-react-source-code

64
65
66
67
68
69
70
71
72
73
      const render = props.children;
      return render(contextValue);
    },
);
sharedContextTests('useContext inside forwardRef component', Context =>
  React.forwardRef(function Consumer(props, ref) {
    const observedBits = props.unstable_observedBits;
    let contextValue;
    expect(() => {
      contextValue = useContext(Context, observedBits);

0

0

0

index.js

GitHub: AdeJord/recovered-tent

125
126
127
128
129
130
131
132
133
134
135
136
137


const mouseCoordinatesFromEvent = (e) => {
  return { x: e.clientX, y: e.clientY }
}


const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [] }, ref) => {
  const swipeAlreadyReleased = React.useRef(false)


  const element = React.useRef()

0

0

0

index.js

GitHub: Hrobitaillie/Kayt0-MyPopup

405
406
407
408
409
410
411
412
413
414
         */
        return (React__namespace.createElement(VisualElementHandler, { visualElement: context.visualElement, props: configAndProps },
            features,
            React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));
    }
    const ForwardRefComponent = React.forwardRef(MotionComponent);
    ForwardRefComponent[motionComponentSymbol] = Component;
    return ForwardRefComponent;
}
function useLayoutId({ layoutId }) {

0

0

1

index.js

GitHub: teu-ai/ant-design

13
14
15
16
17
18
19
20
21
22
var _usePatchElement3 = _interopRequireDefault(require('../../_util/hooks/usePatchElement'));
var _confirm = require('../confirm');
var _HookModal = _interopRequireDefault(require('./HookModal'));
var uuid = 0;
var ElementsHolder = /*#__PURE__*/ React.memo(
  /*#__PURE__*/ React.forwardRef(function (_props, ref) {
    var _usePatchElement = (0, _usePatchElement3['default'])(),
      _usePatchElement2 = (0, _slicedToArray2['default'])(_usePatchElement, 2),
      elements = _usePatchElement2[0],
      patchElement = _usePatchElement2[1];

0

0

2