react#forwardRef JavaScript Examples

Input = forwardRef((props, ref) => {
  const { icon, className, ...rest } = props;

  return (
    <StyledInput className={className}>
      {icon && <StyledIcon type={icon} size={16} />}
      <InputField ref={ref} {...rest} />
    </StyledInput>
  );
})

UploadVideo = forwardRef((props, ref) => {
	
	const { getFieldDecorator } = props.form;

	return (
			<Form id="upload" ref={ref}>
				<Form.Item>
					{getFieldDecorator("title", {
						rules: [{ required: true, message: "Please enter a title for the video." }],
					})(
						<Input type="text" name="title" onChange={props.handleFormInput} placeholder="Video title" autoComplete="off" />
					)}
				</Form.Item>
				<Form.Item>
					{getFieldDecorator("description", {
						rules: [{ required: true, message: "Please enter a description for the video." }],
					})(
						<Input
							type="text"
							name="description"
							onChange={props.handleFormInput}
							placeholder="Video description"
							autoComplete="off"
						/>
					)}
				</Form.Item>
			</Form>
	);
})

Card = forwardRef(({ isLink, variant, ...props }, ref) => {
  const theme = useTheme();

  const primary = {
    background: theme.gradients.brand,
    color: "white",
  };

  return (
    <Box
      ref={ref}
      position="relative"
      d="flex"
      flexDirection="column"
      p={6}
      borderRadius="md"
      boxShadow="brand"
      border="1px solid transparent"
      overflow="hidden"
      _hover={
        isLink
          ? {
              borderColor: "brand.600",
              cursor: "pointer",
            }
          : {}
      }
      _focus={
        isLink
          ? {
              borderColor: "brand.600",
            }
          : {}
      }
      {...(variant === "primary" ? primary : {})}
      {...props}
    />
  );
})

Input = forwardRef(
  (
    {
      children,
      message,
      short,
      borderNone,
      focusBorderColor,
      type,
      placeholder,
      value,
      onChange,
      ...rest
    },
    ref,
  ) => {
    return (
      <StLabel New={short}>
        {children && <StLabelName>{children}</StLabelName>}
        <StInput
          short={short}
          message={message}
          borderNone={borderNone}
          focusBorderColor={focusBorderColor}
          type={type}
          placeholder={placeholder}
          value={value}
          onChange={onChange}
          ref={ref}
          {...rest}
        />
      </StLabel>
    );
  },
)

Toggle = forwardRef(({ defaultChecked, label, ...props }, ref) => (
  <InputWrapper>
    {label && <Label>{label}</Label>}
    <Input
      type="checkbox"
      defaultChecked={defaultChecked}
      {...props}
      ref={ref}
      id="switch"
    />
    <LabelInput htmlFor="switch" />
  </InputWrapper>
))

SkillDisplay = forwardRef(({ theme = null, version = null, userId = null, handleRouteChanged = null, options = {} }, ref) => {
  useEffect(() => {
    clientDisplay = new SkillsDisplayJS({
      options,
      theme,
      version,
      userId,
      handleRouteChanged,
    });

    clientDisplay.attachTo(document.getElementById('clientSkillsDisplayContainer'));

    return () => {
      destroy(clientDisplay);
    };
  }, [theme, version, userId, handleRouteChanged, options]);

  useImperativeHandle(ref, () => ({
    navigate(path) {
      if (clientDisplay) {
        clientDisplay.navigate(path);
      }
    },
  }), []);

  return (<div id='clientSkillsDisplayContainer'/>);
})

InputText = forwardRef(
	({ className = '', isError = false, placeHolder = false, ...rest }, ref) => {
		const inputBaseStyle = `${className} input-text flex items-center relative w-full rounded-lg`
		const inputBgStyle = `${
			placeHolder ? 'bg-transparent focus:bg-transparent' : 'bg-white bg-opacity-10 focus:bg-white'
		} focus:bg-opacity-20 focus:border-transparent`
		const inputBorderStyle = 'outline-none'
		const inputTextStyle = 'text-white text-opacity-90 text-body text-base '

		const inputStyle = `${inputBaseStyle} ${inputBgStyle} ${inputBorderStyle} ${inputTextStyle} ${
			isError ? 'input-text--error' : ''
		}`

		return placeHolder ? (
			<div className={`flex bg-white bg-opacity-10 rounded-lg w-1/4`}>
				<input ref={ref} className={inputStyle} {...rest} />
				<div className="inline-block text-white text-base my-auto px-1.5">{placeHolder}</div>
			</div>
		) : (
			<input ref={ref} className={inputStyle} {...rest} />
		)
	}
)

tableIcons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
}

Image = forwardRef((props, ref) => {
  const { theme } = useThemeUI();
  const { width, height } = theme.images?.[props.variant] ?? {};

  return props.src ? (
    <_Image ref={ref} {...props} />
  ) : (
    <ReactLoadingSkeleton
      circle={props.variant === "avatar"}
      {...props}
      width={props.width || width}
      height={props.height || height}
    />
  );
})

ComponentToPrint = forwardRef(({ style, url, queueName }, ref) => {
  return (
    <div className={style} ref={ref}>
      <h1>
        <u>{getSentenceCaseText(queueName)}</u>
      </h1>
      <span>Scan this QR to get your position in the line</span>
      <QRCode value={url} />
      <p style={{ textAlign: 'center' }}>
        {'or visit '}
        <a href={url} target="_blank" rel="noopener noreferrer">
          {url}
        </a>
      </p>
    </div>
  );
})

RangeInput = forwardRef(function (_ref, ref) {
  var name = _ref.name,
      _onChange = _ref.onChange,
      _onFocus = _ref.onFocus,
      _onBlur = _ref.onBlur,
      valueProp = _ref.value,
      rest = _objectWithoutPropertiesLoose(_ref, ["name", "onChange", "onFocus", "onBlur", "value"]);

  var formContext = useContext(FormContext);

  var _formContext$useFormC = formContext.useFormContext(name, valueProp),
      value = _formContext$useFormC[0],
      setValue = _formContext$useFormC[1];

  var _useState = useState(),
      focus = _useState[0],
      setFocus = _useState[1];

  return React.createElement(StyledRangeInput, _extends({
    ref: ref,
    name: name,
    focus: focus,
    value: value
  }, rest, {
    onFocus: function onFocus(event) {
      setFocus(true);
      if (_onFocus) _onFocus(event);
    },
    onBlur: function onBlur(event) {
      setFocus(false);
      if (_onBlur) _onBlur(event);
    },
    onChange: function onChange(event) {
      setValue(event.target.value);
      if (_onChange) _onChange(event);
    },
    type: "range"
  }));
})

ExternalLink = forwardRef(({ href, children, ...rest }, ref) => {
  const linkExtras = rest["aria-label"]
    ? { "aria-label": rest["aria-label"] }
    : {}
  return (
    <Box as="span" {...rest} ref={ref}>
      <OutboundLink
        rel="external noopener noreferrer"
        target="_blank"
        href={href}
        {...linkExtras}
      >
        {children}
      </OutboundLink>
    </Box>
  )
})

SwitchLanguage = forwardRef((props, ref) => {
    const locale = useLocale();
    const setLocale = useSetLocale();
    const classes = useStyles();
    return (
        <MenuItem
            ref={ref}
            className={classes.menuItem}
            onClick={() => {
                setLocale(locale === 'en' ? 'fr' : 'en');
                props.onClick();
            }}
        >
            <ListItemIcon className={classes.icon}>
                <Language />
            </ListItemIcon>
            Switch Language
        </MenuItem>
    );
})

Link = forwardRef((props, ref) => {
  const componentProps = { ...props }
  let Component = GatsbyLink
  if (props.isStatic || !props.isRelative) {
    Component = 'a'
    if (!props.isRelative) {
      componentProps.target = '_blank'
      componentProps.rel = 'noopener noreferrer'
    }
  } else {
    componentProps.to = componentProps.href
    delete componentProps.href
  }

  let tracking = props.tracking
  if (!tracking && props.href) tracking = { label: props.href }
  if (tracking) {
    componentProps.onClick = (e) => {
      analytics.click({ category: tracking.category || 'link', label: tracking.label, event: e })
      props.onClick && props.onClick(e)
    }
  }

  delete componentProps.isStatic
  delete componentProps.isRelative
  delete componentProps.tracking

  return (
    <Component ref={ref} {...componentProps} />
  )
})

// Because container depends on fancyScroll
// it must be wrapped in additional container
function editorContainer() {
  class Container extends Component {
    render() {
      const {
        props: { fancyScroll, children, forwardedRef, ...rest },
      } = this;

      return (
        <>
          {fancyScroll === true && (
            <PerfectScrollbar
              ref={(elRef) => (forwardedRef.current = elRef)}
              {...rest}
              options={{ suppressScrollX: true }}
            >
              {children}
            </PerfectScrollbar>
          )}
          {fancyScroll === false && (
            <div ref={forwardedRef} {...rest}>
              {children}
            </div>
          )}
        </>
      );
    }
  }

  return React.forwardRef((props, ref) => {
    return <Container forwardedRef={ref} {...props} />;
  });
}

CustomInput = forwardRef(
  // eslint-disable-next-line react/prop-types
  ({ value, onClick, placeholder, onChange }, ref) => {
    return (
      <input
        ref={ref}
        className="input is-medium"
        onClick={onClick}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
      />
    );
  }
)

VideoContainer = forwardRef((props, ref) => {
  const {
    source,
    paused,
    onReadyForDisplay,
    onLoadStart,
    onLoad,
    onPlaybackRateChange,
    onProgress,
    onSeek,
    onEnd,
    onError,
  } = props;

  return (
    <Video
      ref={ref}
      source={source}
      paused={paused}
      onReadyForDisplay={onReadyForDisplay}
      onLoadStart={onLoadStart}
      onLoad={onLoad}
      onPlaybackRateChange={onPlaybackRateChange}
      onProgress={onProgress}
      onSeek={onSeek}
      onEnd={onEnd}
      onError={onError}
      disableFocus={true}
      resizeMode={'contain'}
      style={styles.video}
    />
  );
})

SkipButton = forwardRef((props, ref) => {
    const {className, children, onClick, ...others} = props;

    return <div className={`SkipButton ${className || ''}`}
                role='button'
                tabIndex={0}
                ref={ref}
                {...others}
                onKeyDown={evt => {
                    if ((evt.key === 'Enter') || (evt.key === ' ')) {
                        evt.preventDefault();
                        onClick(evt);
                    }
                }}
    >
        {children}
    </div>;
})

CustomInput = forwardRef(({ value, onClick, onKeyDown }, ref) => (
  <input
    type="text"
    value={value}
    onClick={onClick}
    onKeyDown={onKeyDown}
    readOnly
  />
))

Page = forwardRef(({ children, title = '', meta, ...other }, ref) => (
  <>
    <Helmet>
      <title>{`${title} | DRF-React BoilerPlate`}</title>
      {meta}
    </Helmet>

    <Box ref={ref} {...other}>
      {children}
    </Box>
  </>
))

InnerElementType = forwardRef(({children, ...rest}, ref) => (
  <svg ref={ref} {...rest}>
    <defs>
      <pattern
        id="didNotRenderPattern"
        patternUnits="userSpaceOnUse"
        width="4"
        height="4">
        <path
          d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"
          className={styles.PatternPath}
        />
      </pattern>
    </defs>
    {children}
  </svg>
))

PopcornBox = forwardRef((props, ref) => (
  <img
    ref={ref}
    alt="Popcorn box"
    {...props}
    width="134"
    height="120"
    css={css`
      position: relative;
      left: 50%;
      width: 134px;
      height: 120px;
      margin-left: -67px;
      transform: scale(0.8);

      ${media.sm} {
        transform: scale(1);
      }
    `}
  />
))

tableIcons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
}

Label = forwardRef(({
  text,
  children,
  required,
  placement,
  description,
  size,
  large,
  style,
  simple,
  flat,
}, ref) => {
  const tagName = simple ? 'div' : 'label';
  const mods = {
    size,
    large,
    flat,
    placement,
    withDescription: !!description,
    empty: !children,
  };

  return (
    <Block ref={ref} name="label" tag={tagName} style={style} mod={mods} data-required={required}>
      <Elem name="text">
        <Elem name="content">
          {text}
          {description && <Elem name="description">{description}</Elem>}
        </Elem>
      </Elem>
      <Elem name="field">{children}</Elem>
    </Block>
  );
})

Input = forwardRef(({ label, className, required, labelProps, ghost, waiting, ...props }, ref) => {
  const rootClass = cn('input');
  const classList = [
    rootClass.mod({ ghost }),
    className,
  ].join(" ").trim();

  const input = useMemo(() => {
    return waiting ? (
      <div className={rootClass.elem('spinner')}/>
    ) : (
      <input {...props} ref={ref} className={classList}/>
    );
  }, [props, ref, classList, waiting]);

  return label ? (
    <Label
      {...(labelProps ?? {})}
      text={label}
      required={required}
    >{input}</Label>
  ) : input;
})

Button = forwardRef(({ loading, children, onClick, ...props }, ref) => (
  <StyledButton {...props} onClick={loading ? null : onClick} ref={ref}>
    {loading ? (
      <StyledLoadingIcon />
    ) : (
        children
      )}
  </StyledButton>
))

tableIcons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
}

AdFormTab = forwardRef(({isSelected, ...props}, ref) => (
  <Tab
    ref={ref}
    isSelected={isSelected}
    color="muted"
    fontWeight={500}
    py={2}
    px={4}
    rounded="md"
    _selected={{bg: 'brandBlue.50', color: 'brandBlue.500'}}
    {...props}
  />
))

VideoComponent = forwardRef((props, ref) => {
  const { setPlaying, setCurrentTime, setDuration, evaluatePercentage } = useContext(VideoContext)
  const { src } = props
  return (
    <>
      <video onPlay={(e) => {
        setPlaying(true)
        setDuration(EvaluateTime(ref.current.duration))
        if (props.onPlay) {
          props.onPlay(e)
        }
      }}
        onPause={(e) => {
          setPlaying(false)
          if (props.onPause) {
            props.onPause(e)
          }
        }}
        ref={ref}
        className="video-component"
        autoPlay={props.autoPlay ? true : false}
        controlsList="nodownload"
        onTimeUpdate={(e) => {
          setCurrentTime(EvaluateTime(ref.current.currentTime))
          evaluatePercentage(ref.current.currentTime, ref.current.duration)
          if (props.onTimeUpdate) {
            props.onTimeUpdate(e, ref.current.currentTime, ref.current.duration)
          }
        }} >
        <source src={src} type={props.type ? props.type : "video/mp4"} />
      </video>
    </>
  )
})