How to use the useRef function from react

index.js

GitHub: szhsin/react-menu

1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
  viewScroll = _ref$viewScroll === void 0 ? 'initial' : _ref$viewScroll,
  portal = _ref.portal,
  theming = _ref.theming,
  onItemClick = _ref.onItemClick,
  restProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
var containerRef = react.useRef(null);
var scrollNodesRef = react.useRef({});
var anchorRef = restProps.anchorRef,
  state = restProps.state,
  onClose = restProps.onClose;

48

881

6

+ 16 other calls in file

index.js

GitHub: cartoonmangodev/react-boilerplate-redux-saga-hoc

1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646


function useStaleRefresh(fn, name) {
  var arg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  var initial // initialLoadingstate = true,
  = arguments.length > 3 ? arguments[3] : undefined;
  var prevArgs = React.useRef(null);


  var _useState5 = React.useState(null),
      _useState6 = _slicedToArray(_useState5, 2),
      isUpdating = _useState6[0],

6

9

3

+ 9 other calls in file

dialogic-react.cjs

GitHub: ArthurClemens/dialogic

945
946
947
948
949
950
951
952
953
954
  deps = [],
  defer,
  debug
}) => {
  const [streamValues, setStreamValues] = React.useState({});
  const isInitedRef = React.useRef(false);
  const subsRef = React.useRef([]);
  const subscribe = (memo2) => {
    if (debug) {
      debug("Subscribe");

1

54

1

+ 3 other calls in file

SideBar.jsx

GitHub: bulbaME/space-time

10
11
12
13
14
15
16
17
18
19
const [sidebar, setSidebar] = React.useState({ type: 'contacts', id: ''});
const [searchInput, setSearchInput] = React.useState('');
const [searchTimeout, setSearchTimeout] = React.useState(0);
const [callTimeInt, setCallTimeInt] = React.useState(0);
const callTimeRef = React.useRef();
const searchRef = React.useRef();

const callTimeCount = (timestamp) => {
    let time = Date.now() - timestamp;
    time = Math.floor(time / 1000);

0

3

1

+ 3 other calls in file

bundle.cjs

GitHub: dbeaver/cloudbeaver

95
96
97
98
99
100
101
102
103
104
});

const useLayoutEffect = typeof window === 'undefined' ? react.useEffect : react.useLayoutEffect;

function useFocusRef(isSelected) {
  const ref = react.useRef(null);
  useLayoutEffect(() => {
    if (!isSelected) return;
    ref.current?.focus({
      preventScroll: true

267

0

43

use-component-size.js

GitHub: jamesarnall/storyboarder

13
14
15
16
17
18
19
20
21
22
}

function useComponentSize(ref) {
  let [ComponentSize, setComponentSize] = useState(getSize(ref.current))
  let mainElement = useRef()
  let asideElement = useRef()
  const handleResize = () => {
    if (ref && ref.current) {
      setComponentSize(getSize(mainElement.current, asideElement.current))
    }

263

0

1

+ 3 other calls in file

Player.js

GitHub: nklhtv/stremio-web

68
69
70
71
72
73
74
75
76
77
        extraSubtitlesTextColor: null,
        extraSubtitlesBackgroundColor: null,
        extraSubtitlesOutlineColor: null
    }
);
const videoRef = React.useRef(null);
const dispatch = React.useCallback((action, options) => {
    if (videoRef.current !== null) {
        videoRef.current.dispatch(action, options);
    }

129

1

0

Video.js

GitHub: ppalves/stremio-web

11
12
13
14
15
16
17
18
19
20
const onErrorRef = useLiveRef(props.onError);
const onPropValueRef = useLiveRef(props.onPropValue);
const onPropChangedRef = useLiveRef(props.onPropChanged);
const onSubtitlesTrackLoadedRef = useLiveRef(props.onSubtitlesTrackLoaded);
const onImplementationChangedRef = useLiveRef(props.onImplementationChanged);
const videoElementRef = React.useRef(null);
const videoRef = React.useRef(null);
const dispatch = React.useCallback((action) => {
    if (action && action.type === 'command' && action.commandName === 'load' && action.commandArgs) {
        const Video = selectVideoImplementation(action.commandArgs);

129

0

0

+ 3 other calls in file

index.js

GitHub: cartoonmangodev/react-boilerplate-redux-saga-hoc

2181
2182
2183
2184
2185
2186
2187
2188
2189
2190
    _ref5$VALUE_KEY = _ref5.VALUE_KEY,
    VALUE_KEY = _ref5$VALUE_KEY === void 0 ? _VALUE_KEY || VALUE : _ref5$VALUE_KEY,
    _ref5$ERROR_KEY = _ref5.ERROR_KEY,
    ERROR_KEY = _ref5$ERROR_KEY === void 0 ? _ERROR_KEY || ERROR$1 : _ref5$ERROR_KEY;

var formRef = React.useRef({
  is_validate_form_triggered: false
});

var _useState = React.useState(FORM_CONFIG),

6

9

3

+ 4 other calls in file

index.js

GitHub: szhsin/react-accordion

216
217
218
219
220
221
222
223
224
225
const useHeightTransition = ({
  status,
  isResolved
}) => {
  const [height, setHeight] = react.useState();
  const elementRef = react.useRef(null);
  useIsomorphicLayoutEffect(() => {
    (status === 'preEnter' || status === 'preExit') && setHeight(elementRef.current.getBoundingClientRect().height);
  }, [status]);
  const style = {

4

84

0

index.cjs.js

GitHub: ryjin111/ScratchFinance

878
879
880
881
882
883
884
885
886
887
888
}, styledSystem.space);
var templateObject_1$h;


var BackgroundImage = function (_a) {
    var src = _a.src, otherProps = __rest(_a, ["src"]);
    var imgRef = React.useRef(null);
    React.useEffect(function () {
        var img = imgRef.current;
        var observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {

1

1

0

+ 11 other calls in file

ssr-entry.js

GitHub: Flandre3569/vigor.js

1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
  });
}
function TocComponent(props) {
  const { headers = [] } = props;
  const tocLength = headers.length > 0;
  const markRef = React.useRef(null);
  const renderToc = (tocTree) => {
    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
      "a",
      {

0

1

1

index.js

GitHub: AdeJord/recovered-tent

126
127
128
129
130
131
132
133
134
135
136
137
138
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()


  React.useImperativeHandle(ref, () => ({

0

0

0

bundle.js

GitHub: evertonProgramadorCriativo/teste

384
385
386
387
388
389
390
391
392
393
  setRailWrapperWidth = _useState18[1];
var _useState19 = React.useState(false),
  _useState20 = _slicedToArray(_useState19, 2),
  hasSetResizeHandler = _useState20[0],
  setHasSetResizeHandler = _useState20[1];
var railWrapperRef = React.useRef(null);
var autoplayIntervalRef = React.useRef(null);
var breakpointSetting = useResponsiveLayout(responsiveLayout);
var randomKey = React.useMemo(function () {
  return "".concat(Math.random(), "-").concat(Math.random());

0

0

0

index.js

GitHub: Hrobitaillie/Kayt0-MyPopup

104
105
106
107
108
109
110
111
112
113
function useVisualElement(Component, visualState, props, createVisualElement) {
    const parent = useVisualElementContext();
    const lazyContext = React.useContext(LazyContext);
    const presenceContext = React.useContext(PresenceContext);
    const reducedMotionConfig = React.useContext(MotionConfigContext).reducedMotion;
    const visualElementRef = React.useRef();
    /**
     * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
     */
    createVisualElement = createVisualElement || lazyContext.renderer;

0

0

1

+ 6 other calls in file

bundle.cjs

GitHub: DK-Dinesh-DK/AgGrid

741
742
743
744
745
746
747
748
749
750
751
    groupBy
  };
}


function useGridDimensions() {
  const gridRef = react.useRef(null);
  const [inlineSize, setInlineSize] = react.useState(1);
  const [blockSize, setBlockSize] = react.useState(1);
  const [isWidthInitialized, setWidthInitialized] = react.useState(false);
  useLayoutEffect(() => {

0

0

1

+ 15 other calls in file

kegComponents.web.js

GitHub: lancetipton/keg-components

188
189
190
191
192
193
194
195
196
197
var ref = _ref.ref,
    animation = _ref.animation,
    config = _ref.config,
    startCb = _ref.startCb,
    startDelay = _ref.startDelay;
var aniRef = React.useRef(ref);
var animate = function animate() {
  var element = aniRef.current;
  element && jsutils.isFunc(element.animate) && element.animate(animation, config);
};

0

0

0

index.js

GitHub: teu-ai/ant-design

32
33
34
35
36
37
38
39
40
41
    // eslint-disable-next-line react/jsx-no-useless-fragment
    return /*#__PURE__*/ React.createElement(React.Fragment, null, elements);
  }),
);
function useModal() {
  var holderRef = React.useRef(null);
  // ========================== Effect ==========================
  var _React$useState = React.useState([]),
    _React$useState2 = (0, _slicedToArray2['default'])(_React$useState, 2),
    actionQueue = _React$useState2[0],

0

0

2