react#createRef JavaScript Examples

export default function ExperienceCard({ cardInfo }) {
  const [colorArrays, setColorArrays] = useState([]);
  const imgRef = createRef();

  function getColorArrays() {
    const colorThief = new ColorThief();
    setColorArrays(colorThief.getColor(imgRef.current));
  }

  function rgb(values) {
    return typeof values === "undefined" ? null : "rgb(" + values.join(', ') + ")";
  }

  const GetDescBullets = ({ descBullets }) => {
    return descBullets ? descBullets.map((item) => <li className="subTitle">{item}</li>) : null
  };

  return (
    <div className="experience-card">
      <div style={{background: rgb(colorArrays) }} className="experience-banner">
        <div className="experience-blurred_div"></div>
        <div className="experience-div-company">
          <h5 className="experience-text-company">{cardInfo.company}</h5>
        </div>
        
        <img crossOrigin={"anonymous"} ref={imgRef} className="experience-roundedimg" src={cardInfo.companylogo} alt={cardInfo.company} onLoad={() => getColorArrays()}/>
      </div>
      <div className="experience-text-details">
        <h5 className="experience-text-role">{cardInfo.role}</h5>
        <h5 className="experience-text-date">{cardInfo.date}</h5>
        <p className="subTitle experience-text-desc">{cardInfo.desc}</p>
        <ul>
          <GetDescBullets descBullets={cardInfo.descBullets} />
        </ul>
      </div>
    </div>
  );
}

constructor(props) {
        super(props);
        this.imgRef = createRef();


        this.serverName = props.name;
        this.serverAdress = props.adress;
        this.checkStatus();
    }

SimpleLineChart = ({
  data,
  seriesOptions = seriesOptDefault,
  chartOptions = chartOptDefault,
  color,
  size = sizeDefault,
  className,
}) => {
  const chartDiv = createRef();

  useEffect(() => {
    if (!chartDiv?.current) return;

    const chart = createChart(chartDiv.current, size);
    chart.applyOptions(chartOptions);
    chart.timeScale().fitContent();

    const lineSeries = chart.addLineSeries({
      ...seriesOptions,
      color,
    });
    lineSeries.setData(data);

    return () => chart.remove();
  }, [data, seriesOptions, chartOptions, size, chartDiv, color]);

  return <div className={className} ref={chartDiv} />;
}

export default function Search({ indices, collapse, homepage, hitsAsGrid, variation }) {
  const ref = createRef()
  const [query, setQuery] = useState(``)
  const [focus, setFocus] = useState(false)
  const searchClient = algoliasearch(
    process.env.GATSBY_ALGOLIA_APP_ID,
    process.env.GATSBY_ALGOLIA_SEARCH_KEY
  )
  useOnClickOutside(ref, () => setFocus(false))
  return (
    <Root ref={ref}>
      <InstantSearch
        searchClient={searchClient}
        indexName={indices[0].name}
        onSearchStateChange={({ query }) => setQuery(query)}
      >
        <Input onFocus={() => setFocus(true)} {...{ collapse, focus }} variation={variation} />
        <HitsWrapper show={query.length > 0 && focus} asGrid={hitsAsGrid} homepage={homepage}>
          {indices.map(({ name, title, type }) => (
            <Index key={name} indexName={name}>
              <header>
                <h3>{title}</h3>
                <Stats />
              </header>
              <Results />
              <Hits type={type} onClick={() => setFocus(false)} />
            </Index>
          ))}

        </HitsWrapper>
      </InstantSearch>
    </Root>
  )
}

constructor(props) {
    super(props);
    this.state = {
      showDialog: false,
      data : []
    };
    this.btn = createRef();
    this.onClick = this.onClick.bind(this);
    // ? Add listeners
    this.initBtn = this.initBtn.bind(this);
    // ? Mobile
    this.onTouch = this.onTouch.bind(this);
    this.onTouchEnd = this.onTouchEnd.bind(this);
  }

constructor(props) {
        super(props);
        this.state = this.getInitialState();
        this.selectLog = this.selectLog.bind(this);
        this.selectSnapshots = this.selectSnapshots.bind(this);
        this.handleChangeTab = this.handleChangeTab.bind(this);
        this.handleOnDrop = this.handleOnDrop.bind(this);
        this.handleExpandLogView = this.handleExpandLogView.bind(this);
        this.dropzoneRef = createRef();

        if (window.File && window.FileReader && window.FileList && window.Blob) {
            // Great success! All the File APIs are supported.
        } else {
            // eslint-disable-next-line no-alert
            alert('The File APIs are not fully supported in this browser.');
        }
    }

export default function useArrayRef(size) {
  const arrayRef = useRef([]);

  if (arrayRef.current.length !== size) {
    arrayRef.current = Array.from(Array(size), (_, i) => arrayRef.current[i] || createRef());
  }

  return arrayRef.current;
}

ThemeView = () => {
  const [color, setColor] = useState('rgb(255, 255, 255)')
  const ref = createRef()

  useEffect(() => {
    const el = ref.current.parentNode.firstChild
    const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
    setColor(varColor)
  }, [ref])

  return (
    <table className="table w-100" ref={ref}>
      <tbody>
      <tr>
        <td className="text-muted">HEX:</td>
        <td className="font-weight-bold">{ rgbToHex(color) }</td>
      </tr>
      <tr>
        <td className="text-muted">RGB:</td>
        <td className="font-weight-bold">{ color }</td>
      </tr>
      </tbody>
    </table>
  )
}

constructor(props) {
    super(props);
    this.state = {
      minder: null,
      selectedNode: null,
      noteNode: null,
      noteContent: null,
      showEdit: false,
      inputContent: null,
      activeTab: '1',
      showToolBar: this.props.type === 'compare' ? false : true,
      fullScreen: false,
      loading: true,
      isLock: this.props.isLock || false, // 被其他人锁住
      locked: false, // 当前session主动锁住
      popoverVisible: false,
      nowUseList: [],
    };
    this.base = -1;
    this.expectedBase = -1;
    setTimeout(() => {
      if (this.minder) {
        this.setState({
          minder: this.minder,
        });
        clipboardRuntime.init(this.minder, this.props.readOnly);
      }
    }, 100);
    this.navNode = createRef();
  }

constructor(props) {
        // prop appObject is required //
        super(props);
        const titleRefs = [];
        examples.examples.forEach( (v, i) => titleRefs[i] = createRef());
        this.state = {
            visible: false,
            examples: examples,
            dgmFiles: {},
            dgmAssets: {},
            tooltipI: null,
            tooltipEl: null,
            titleRefs: titleRefs
        };
        this.dsFileMgr = this.props.appObject.dsFileMgr;
        this.close = this.close.bind(this);
        this.openExample = this.openExample.bind(this);
        this.openExampleByTitle = this.openExampleByTitle.bind(this);
    }

standaloneModal = (props) => {
  const modalRef = createRef();
  const rootDiv = document.createElement("div");

  rootDiv.className = cn("modal-holder").toClassName();

  document.body.appendChild(rootDiv);

  const renderModal = (props, animate) => {
    render((
      <Modal
        ref={modalRef}
        {...props}
        onHide={() => {
          props.onHidden?.();
          rootDiv.remove();
        }}
        animateAppearance={animate}
      />
    ), rootDiv);
  };

  renderModal(props, true);

  return {
    update(newProps) {
      renderModal({ ...props, ...(newProps ?? {}) }, false);
    },
    close() {
      modalRef.current.hide();
    },
  };
}

standaloneModal = props => {
  const modalRef = createRef();
  const rootDiv = document.createElement("div");

  rootDiv.className = cn("modal-holder").toClassName();

  document.body.appendChild(rootDiv);

  const renderModal = (props, animate) => {
    render(
      <Modal
        ref={modalRef}
        {...props}
        onHide={() => {
          props.onHidden?.();
          rootDiv.remove();
        }}
        animateAppearance={animate}
      />,
      rootDiv,
    );
  };

  renderModal(props, true);

  return {
    update(newProps) {
      renderModal({ ...props, ...(newProps ?? {}) }, false);
    },
    close() {
      modalRef.current.hide();
    },
  };
}

ThemeView = () => {
       const [color, setColor] = useState('rgb(255, 255, 255)')
 const ref = createRef()

   useEffect(() => {
     const el = ref.current.parentNode.firstChild
     const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
     setColor(varColor)
   }, [ref])

   return (
      <table className="table w-100" ref={ref}>
       <tbody>
       <tr>
         <td className="text-muted">HEX:</td>
         <td className="font-weight-bold">{ rgbToHex(color) }</td>
       </tr>
       <tr>
         <td className="text-muted">RGB:</td>
         <td className="font-weight-bold">{ color }</td>
       </tr>
       </tbody>
      </table>
   )
 }

constructor(props) {
    super(props);
    this.state = {
      open: false,
      saveAndContinueLabel: i18next.t('Save and add another'),
      action: null,
      showPersonForm:
        props.autocompleteNames !== NamesAutocompleteOptions.SEARCH_ONLY ||
        !_isEmpty(props.initialCreatibutor),
    };
    this.inputRef = createRef();
    this.identifiersRef = createRef();
    this.affiliationsRef = createRef();
    this.namesAutocompleteRef = createRef();
  }

constructor(props) {
    super(props);
    this.state = {
      learnArgument: {
        learnRate: 0.0001,
        batchSize: 0.4,
        epochs: 20,
        hiddenUnits: 100,
      },
      loss: undefined,
      loading: false,
      model: undefined,
    };

    this.smallCanvasRef = createRef();
  }

it('should forward refs', () => {
    class MyComponent extends Component {
        render() {
            return null;
        }

        handleClick = () => {};
    }

    const EnhancedMyComponent = withRouterScroll(MyComponent);

    const ref = createRef();

    render(
        <ScrollBehaviorProvider>
            <EnhancedMyComponent ref={ ref } />
        </ScrollBehaviorProvider>,
    );

    expect(ref.current.handleClick).toBeDefined();
});

constructor(props) {
    super(props);
    this.state = {
      typeList: [], // 任务状态
      errorInfoModalVisible: false, // 错误信息展示弹窗的 页面
      errorInfo: '', // 错误信息
    };
    this.filterFormRef = createRef();
  }

SearchBox = () => {
    const navigate = useNavigate();
    const inputRef = createRef();

    const onKeyDownListener = useCallback((ev) => {
        if (!isInputElement(document.activeElement) && ev.key === '/') {
            ev.preventDefault();

            inputRef.current.select();
            inputRef.current.focus();
        }
    }, [inputRef]);

    useEffect(() => {
        document.addEventListener('keydown', onKeyDownListener);
        return () => {
            document.removeEventListener('keydown', onKeyDownListener);
        };
    }, [onKeyDownListener]);

    const handleSearchKeyDown = ev => {
        const inputField = ev.target;
        const trimmedValue = inputField.value.trim();
        if (ev.key === 'Enter' && trimmedValue.length > 0) {
            navigate('/search/' + encodeURIComponent(trimmedValue));
        }
    }

    return <Input w={200} ref={inputRef} type="search" placeholder="Search..." onKeyDown={handleSearchKeyDown} />
}

test('MenuGroup should allow keyboard navigation to go thru its children', () => {
  const ref = createRef();
  utils.render(
    <Menu menuButton={<MenuButton>Menu Group</MenuButton>} setDownOverflow>
      <MenuItem>One</MenuItem>
      <MenuGroup ref={ref} takeOverflow>
        <MenuItem>Two</MenuItem>
        <MenuDivider />
        <MenuItem disabled>Skip</MenuItem>
        <MenuGroup>
          <MenuItem>Three</MenuItem>
        </MenuGroup>
      </MenuGroup>
      <MenuItem>Four</MenuItem>
    </Menu>
  );

  expect(ref.current).toBeNull();
  utils.clickMenuButton();
  expect(ref.current).toHaveClass('szh-menu__group');
  const menu = utils.queryMenu();

  fireEvent.keyDown(menu, { key: 'ArrowDown' });
  expect(utils.queryMenuItem('One')).toHaveFocus();
  fireEvent.keyDown(menu, { key: 'ArrowDown' });
  expect(utils.queryMenuItem('Two')).toHaveFocus();
  fireEvent.keyDown(menu, { key: 'ArrowDown' });
  expect(utils.queryMenuItem('Three')).toHaveFocus();
  fireEvent.keyDown(menu, { key: 'ArrowDown' });
  expect(utils.queryMenuItem('Four')).toHaveFocus();
  fireEvent.keyDown(menu, { key: 'ArrowDown' });
  expect(utils.queryMenuItem('One')).toHaveFocus();
});

constructor (props) {
    super(props)

    this.state = {
      tags: [],
      suggestions: []
    }

    this.reactTags = createRef()
  }

constructor(props) {
    super(props);

    this.state = {
      fileURL: null,
      error: null,
      currentPageIndex: 1,
      pdf: null,
      scale: 1,
    };

    this.canvas = createRef();
    this.textLayer = createRef();
  }

function Utterances({ repo, path }) {
  const rootElm = createRef();
  const isUtterancesLoaded = useRef(false);

  useEffect(() => {
    if (!rootElm.current || isUtterancesLoaded.current) return;
    const storedIsDarkMode = localStorage.getItem('isDarkMode');

    const utterances = document.createElement('script');
    const utterancesConfig = {
      src,
      repo,
      branch,
      theme: JSON.parse(storedIsDarkMode) ? 'photon-dark' : 'github-light',
      label: 'comment',
      async: true,
      'issue-term': 'pathname',
      crossorigin: 'anonymous',
    };

    Object.keys(utterancesConfig).forEach((configKey) => {
      utterances.setAttribute(configKey, utterancesConfig[configKey]);
    });
    rootElm.current.appendChild(utterances);
    isUtterancesLoaded.current = true;
  }, [repo, rootElm, path]);

  return <div className="utterances" ref={rootElm} />;
}

BackTopBtn = (props) => {
    const [visible, setVisible] = useState(false);
    const [breakpoint] = useState(props.breakpoint ? props.breakpoint : 60);
    const blockRef = createRef();

    const handleScroll = (e) => {
        if (e.srcElement.scrollTop > breakpoint) setVisible(true)
        else setVisible(false)
    }

    useEffect(() => {
        document.addEventListener('scroll', handleScroll, true);
        return () => document.removeEventListener('scroll', handleScroll, true);
    }, [])

    const goTop = () => {
        if (props.setRef.current) {
            props.setRef.current.scrollIntoView({
                behavior: "smooth",
                block: 'start'
            })
        }
    }

    return (
        <div 
            className={(`rui-btn-back-top ${props.dark ? 'dark' : ''}`).trim()}
            ref={blockRef}
            style={{ 
                right: props.offsetX ? props.offsetX : 25, 
                bottom: props.offsetY ? props.offsetY : 25
            }}>
            <CSSTransition
                in={visible}
                timeout={500}
                classNames="btn-back-top"
                unmountOnExit>
                {props.tooltip ?
                    <Tooltip tooltip={props.tooltip}>
                        <Button
                            style={props.btnStyle} 
                            icon={!props.name ? props.icon : null}
                            name={!props.icon ? props.name : null}
                            lifted={props.lifted}
                            size={props.size ? props.size : ''}
                            onClick={() => goTop()} 
                            light={!props.dark ? true : false}
                            dark={props.dark ? true : false}/>
                    </Tooltip> : 
                    <Button 
                        style={props.btnStyle}
                        icon={!props.name ? props.icon : null}
                        name={!props.icon ? props.name : null}
                        lifted={props.lifted}
                        size={props.size ? props.size : ''}
                        onClick={() => goTop()} 
                        light={!props.dark ? true : false}
                        dark={props.dark ? true : false}/>
                }
            </CSSTransition>
        </div>
    )
}

recaptchaRef = createRef()

NewsCard = ({ article, i, activeArticle }) => {
  const classes = useStyles();

  const [elRefs, setElRefs] = useState([]);
  const scrollToRef = (ref) =>
    window.scroll(0, ref.current.offsetParent.offsetTop + 850);

  useEffect(() => {
    setElRefs((refs) =>
      Array(20)
        .fill()
        .map((_, j) => refs[j] || createRef())
    );
  }, []);

  useEffect(() => {
    if (i === activeArticle && elRefs[activeArticle]) {
      scrollToRef(elRefs[activeArticle]);
    }
  }, [i, activeArticle, elRefs]);
  return (
    <Card
      blog
      style={activeArticle === i ? { borderBottom: "10px solid #22289a" } : {}}
      ref={elRefs[i]}
    >
      <CardHeader image>
        <a href={article.url} target="_blank" rel="noopener noreferrer">
          <img
            src={
              article.urlToImage ||
              "https://www.industry.gov.au/sites/default/files/August%202018/image/news-placeholder-738.png"
            }
            alt="..."
            height="200"
          />
        </a>
      </CardHeader>
      <CardBody
        style={{ height: "300px", minHeight: "250px", overflow: "hidden" }}
      >
        <Info>
          <h6>{article.source.name}</h6>
        </Info>
        <h4 className={classes.cardTitle}>
          <a href={article.url} target="_blank" rel="noopener noreferrer">
            {article.title}
          </a>
        </h4>
        <p className={classes.description}>
          {article.description
            ? article.description.slice(0, 150) + "..."
            : " "}
        </p>
      </CardBody>
      <CardFooter>
        <div
          style={{
            display: "flex",
            flex: "auto",
            justifyContent: "space-between",
          }}
        >
          <a
            href={article.url}
            target="_blank"
            rel="noopener noreferrer"
            className="MuiListItem-root"
          >
            Learn more
          </a>
          <h3>{i + 1}</h3>
        </div>
      </CardFooter>
    </Card>
  );
}

constructor(props) {
    super(props);

    this.fileInputRef = createRef();
  }

function Messages(props) {
	let messageEnd = createRef();
	let messagesContainer = createRef();
	const { messages } = props;

	const scrollToBottom = () => {
		if (!messagesContainer.current || !messageEnd.current) return;

		const {
			clientHeight,
			scrollTop,
			scrollHeight,
		} = messagesContainer.current;

		// totalMessage >= 1 always, because we have a dummy div as a permanent children
		const totalMessage = messagesContainer.current.children.length;

		const newMessage = messagesContainer.current.children[totalMessage - 2];
		const lastMessage =
			totalMessage > 2
				? messagesContainer.current.children[totalMessage - 3]
				: null;

		if (!newMessage || !lastMessage) return;

		const newMessageHeight = newMessage.clientHeight;
		const lastMessageHeight = lastMessage.clientHeight;

		// -15 for error margin
		if (
			clientHeight + scrollTop + newMessageHeight + lastMessageHeight >=
			scrollHeight - 15
		) {
			messageEnd.current.scrollIntoView();
		}
	};

	useEffect(scrollToBottom, [messages]);

	return (
		<MessagesContainer ref={messagesContainer}>
			{messages.map((message) => (
				<Message user={message.from} key={message.id}>
					{message.text}
				</Message>
			))}
			<div className='dummy' ref={messageEnd}></div>
		</MessagesContainer>
	);
}

TextArea = /*#__PURE__*/function (_Component) {
  _inheritsLoose(TextArea, _Component);

  function TextArea() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this.ref = /*#__PURE__*/createRef();

    _this.focus = function () {
      return _this.ref.current.focus();
    };

    _this.handleChange = function (e) {
      var value = _get(e, 'target.value');

      _invoke(_this.props, 'onChange', e, _extends({}, _this.props, {
        value: value
      }));
    };

    _this.handleInput = function (e) {
      var value = _get(e, 'target.value');

      _invoke(_this.props, 'onInput', e, _extends({}, _this.props, {
        value: value
      }));
    };

    return _this;
  }

  var _proto = TextArea.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        rows = _this$props.rows,
        value = _this$props.value;
    var rest = getUnhandledProps(TextArea, this.props);
    var ElementType = getElementType(TextArea, this.props);
    return /*#__PURE__*/React.createElement(Ref, {
      innerRef: this.ref
    }, /*#__PURE__*/React.createElement(ElementType, _extends({}, rest, {
      onChange: this.handleChange,
      onInput: this.handleInput,
      rows: rows,
      value: value
    })));
  };

  return TextArea;
}(Component)

CometChatReceiverVideoMessageBubble = (props) => {
  const message = {
    ...props.message,
    messageFrom: enums.MESSAGE_FROM_RECEIVER,
  };
  const viewTheme = { ...theme, ...props.theme };
  const player = createRef();
  let senderAvatar = null;
  if (message.receiverType === CometChat.RECEIVER_TYPE.GROUP) {
    senderAvatar = { uri: message.sender.avatar };
  }
  return (
    <View style={style.container}>
      <View style={style.innerContainer}>
        {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? (
          <View style={style.avatarStyle}>
            <CometChatAvatar
              cornerRadius={18}
              borderColor={viewTheme.color.secondary}
              borderWidth={0}
              image={senderAvatar}
              name={message.sender.name}
            />
          </View>
        ) : null}
        <View>
          {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? (
            <View style={style.senderNameContainer}>
              <Text style={{ color: viewTheme.color.helpText }}>
                {message.sender.name}
              </Text>
            </View>
          ) : null}
          <View style={style.messageWrapperStyle}>
            <TouchableOpacity
              style={style.messageVideoWrapperStyle}
              onPress={() => {
                props.actionGenerated(actions.VIEW_ACTUAL_VIDEO, message);
              }}
              onLongPress={() =>
                props.actionGenerated(actions.OPEN_MESSAGE_ACTIONS, message)
              }>
              <VideoPlayer
                source={{
                  uri: message.data.url,
                }} // Can be a URL or a local file.
                ref={player} // Store reference
                style={style.messageVideo}
                navigator={props.navigator}
                disableBack
                disableFullscreen
                disableVolume
                muted
                resizeMode="contain"
              />
            </TouchableOpacity>
          </View>

          <View style={style.containerStyle}>
            <View style={style.messageInfoWrapperStyle}>
              <CometChatReadReceipt {...props} message={message} />
              <CometChatThreadedMessageReplyCount
                {...props}
                message={message}
              />
              <CometChatMessageReactions
                theme={props.theme}
                {...props}
                message={message}
                showMessage={props?.showMessage}
              />
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}