How to use react-uid - 10 common examples

function ImportedComponent(props: ComponentOptions): ReactElement | null {
  const {loading, error, loadable, imported: Component, retry} = useImported(props.loadable);

  if (loading && props.async) {
    throw loadable.resolution;
  }

  if ('render' in props && props.render) {
    return props.render(Component, {loading, error}, props.forwardProps)
  }

  if (Component) {
    // importedUUID for cache busting
    return 
  }

  if (loading) {
    if (props.async) {
      throw loadable.resolution;
    }
    return props.LoadingComponent
      ? 
      : null;
  }

  if (error) {
    // always report about errors
    console.error('react-imported-component', error);
    // let's rethrow the error after react leaves this function
    // this might be very crucial for the "safe" dev mode

(
    { value, isDisabled, children, ...rest }: OptionProps,
    ref: React.Ref,
  ) => {
    const {
      selected,
      focused,
      selectOption,
      focusOption,
      // resetFocused,
    } = useSelectContext();
    const isFocused = focused ? focused.value === value : false;
    const isSelected = selected ? selected.value === value : false;

    const uuid = useId();
    const optionId = `select-option-${uuid}`;

    return (
      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
      <li style="{optionStyle}" data-focus="{isFocused}" data-value="{value}" id="{optionId}" role="option"> {
          if (isDisabled) {
            event.preventDefault();
            return;
          }</li>

onChange,
    children,
    ...rest
  }: AccordionItemProps,
  ref: React.Ref,
) {
  const [isExpanded, setIsExpanded] = useState(defaultIsOpen || false);
  const { current: isControlled } = useRef(isOpen != null);
  let _isExpanded = isControlled ? isOpen : isExpanded;

  const onToggle = () => {
    onChange && onChange(!_isExpanded);
    !isControlled && setIsExpanded(!isExpanded);
  };

  const uuid = useId();
  const uniqueId = id || uuid;

  const headerId = `accordion-header-${uniqueId}`;
  const panelId = `accordion-panel-${uniqueId}`;

  return (

({title = 'Twilio Icon', className, color, decorative = true, display, size}: TwilioIconProps) => {
    const uid = useUID();
    return (
      <span style="{{color,">
        <svg height="100%" width="100%" viewBox="0 0 30 30" aria-labelledby="{uid}" aria-hidden="{decorative}" role="img">
          <title id="{uid}">{title}</title>
          <path d="M15 0C6.7 0 0 6.7 0 15s6.7 15 15 15 15-6.7 15-15S23.3 0 15 0zm0 26C8.9 26 4 21.1 4 15S8.9 4 15 4s11 4.9 11 11-4.9 11-11 11zm6.8-14.7c0 1.7-1.4 3.1-3.1 3.1s-3.1-1.4-3.1-3.1 1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1zm0 7.4c0 1.7-1.4 3.1-3.1 3.1s-3.1-1.4-3.1-3.1c0-1.7 1.4-3.1 3.1-3.1s3.1 1.4 3.1 3.1zm-7.4 0c0 1.7-1.4 3.1-3.1 3.1s-3.1-1.4-3.1-3.1c0-1.7 1.4-3.1 3.1-3.1s3.1 1.4 3.1 3.1zm0-7.4c0 1.7-1.4 3.1-3.1 3.1S8.2 13 8.2 11.3s1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1z" fill="currentColor"></path>
        </svg>
      </span>
    );
  }
);

export function useRegister(
  options: {
    isDisabled?: boolean;
    isFocusable?: boolean;
    extraData?: any;
  } = {},
) {
  const { isDisabled, isFocusable, extraData } = options;
  const id = useUID();
  const ref = useRef(null);
  const { state, actions } = useRegisterContext();

  useLayoutEffect(() => {
    if (isDisabled && !isFocusable) return;
    const rest = extraData || {};
    actions.register(id, ref, rest);
    return () => {
      actions.unregister(id);
    };
  }, [id, isDisabled, isFocusable, ref]);

  return { ref, id, state, actions };
}

export const ThemeSwitcher: React.FC = () => {
  const {theme, updateActiveSiteTheme} = useActiveSiteTheme();

  const handleChange: React.ChangeEventHandler = event => {
    updateActiveSiteTheme(event.currentTarget.value as ThemeVariants);
  };

  const consoleID = useUID();
  const sendGridID = useUID();
  const pasteID = useUID();

  return (
    
      
        Change the site theme

export const ThemeSwitcher: React.FC = () => {
  const {theme, updateActiveSiteTheme} = useActiveSiteTheme();

  const handleChange: React.ChangeEventHandler = event => {
    updateActiveSiteTheme(event.currentTarget.value as ThemeVariants);
  };

  const consoleID = useUID();
  const sendGridID = useUID();
  const pasteID = useUID();

  return (
    
      
        Change the site theme

}
      return null;
    });
  };

  React.useEffect((): void => {
    filterTokenList();
  }, [theme]);

  const handleInput = (e: React.FormEvent): void => {
    const filter = e.currentTarget.value;
    setFilterString(filter);
    filterTokenList();
  };

  const uid = useUID();

  return (
    <>
      
        <label>Filter tokens</label>
        <input type="text" placeholder="filter by name or value" id="{uid}" autocomplete="off" aria-label="Filter the token list">
      
      {tokens != null &amp;&amp;
        tokens.map(cat =&gt; {

export const ThemeSwitcher: React.FC = () => {
  const {theme, updateActiveSiteTheme} = useActiveSiteTheme();

  const handleChange: React.ChangeEventHandler = event => {
    updateActiveSiteTheme(event.currentTarget.value as ThemeVariants);
  };

  const consoleID = useUID();
  const sendGridID = useUID();
  const pasteID = useUID();

  return (
    
      
        Change the site theme

const TextField = ({
  label,
  srOnly,
  onClear,
  value,
  keepFocus,
  blurOnEscape,
  focusOnRender,
  ...otherProps
}: TextFieldProps) => {
  const uid = useUID()
  return (
    
      
        {label}
      
      <input id="{uid}">
      {onClear &amp;&amp; value &amp;&amp; (