react#ReactPortal TypeScript Examples

The following examples show how to use react#ReactPortal. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.ts    From react-panorama with MIT License 6 votes vote down vote up 
/**
 * Creates a [React Portal](https://reactjs.org/docs/portals.html).
 */
export function createPortal(
  children: ReactNode,
  container: Panel,
  key?: null | string,
): ReactPortal {
  const portal = {
    $$typeof: REACT_PORTAL_TYPE,
    key: key == null ? null : String(key),
    children,
    containerInfo: container,
  };

  return portal as any;
}
Example #2
Source File: RcPortal.tsx    From fe-foundation with Apache License 2.0 6 votes vote down vote up 
export function RcPortal(props: IRcPortalProps): ReactPortal | null {
    const {
        children,
        getContainer,
        onUpdated
    } = props;

    const prevParent = useRef<HTMLElement | null>(null);
    const container = useSingleton(() => (isClient() ? document.createElement('div') : null));

    const parent = getContainer == null ? documentBody : getContainer();

    const isEqual = equal(prevParent.current, parent);
    prevParent.current = parent;

    if (!isEqual && parent && container) {
        parent.appendChild(container);
    }

    useEffect(() => () => {
        if (container?.parentNode) {
            container.parentNode.removeChild(container);
        }
    }, []);

    useEffect(() => {
        if (parent && onUpdated) {
            onUpdated();
        }
    });

    // parent被挂载成功，才初始化children
    if (parent && container) {
        return ReactDOM.createPortal(children, container);
    }

    return null;
}
Example #3
Source File: ClientOnlyPortal.ts    From dh-web with GNU General Public License v3.0 6 votes vote down vote up 
export default function ClientOnlyPortal(
    { children, selector }: ClientOnlyPortalProperties,
): ReactPortal {
    const reference = useRef();
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        reference.current = document.querySelector(selector);
        setMounted(true);
    }, [selector]);

    // eslint-disable-next-line unicorn/no-null
    return mounted ? createPortal(children, reference.current) : null;
}
Example #4
Source File: Portal.tsx    From mantine with MIT License 6 votes vote down vote up 
export function Portal(props: PortalProps): ReactPortal {
  const { children, zIndex, target, className, position } = useMantineDefaultProps(
    'Portal',
    defaultProps,
    props
  );

  const theme = useMantineTheme();
  const [mounted, setMounted] = useState(false);
  const ref = useRef<HTMLElement>();

  useIsomorphicEffect(() => {
    setMounted(true);
    ref.current = !target
      ? document.createElement('div')
      : typeof target === 'string'
      ? document.querySelector(target)
      : target;

    if (!target) {
      document.body.appendChild(ref.current);
    }

    return () => {
      !target && document.body.removeChild(ref.current);
    };
  }, [target]);

  if (!mounted) {
    return null;
  }

  return createPortal(
    <div className={className} dir={theme.dir} style={{ position: position as any, zIndex }}>
      {children}
    </div>,
    ref.current
  );
}
Example #5
Source File: listurls.tsx    From Uptimo with MIT License 5 votes vote down vote up 
ListUrls = ({ urls }: any) => {
  const { data, error } = useSWR(`http://localhost:3000/api/v1/urls`, fetcher);
  const [infoAlert, setInfoAlert]: any = useState({ nothing: true });

  const deleteUrl = async(url: string) => {
    const test = await hyttpo.request({
      method: 'DELETE',
      url: `${window.location.origin}/api/v1/delete`,
      body: JSON.stringify({
        url
      })
    }).catch(e => e);

    setInfoAlert({ message: `URL ${url} has been deleted!` })
  }

  return (
    <div>
        { !infoAlert.nothing ? <div className="notification is-primary is-light">
        { infoAlert.message }
        </div> : '' } 
      { data ? <>
        <table className="table">
          <thead>
            <tr>
              <th>URL</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            { data.message.map((url: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined, index: number) => <>
              <tr key={`a${index}`}>
                <td key={`b${index}`}><a href={url as string} key={`d${index}`}>{url}</a></td>
                <td key={`c${index}`}>
                  <button className="button is-small is-danger is-light" onClick={() => deleteUrl(url as string)} key={`e${index}`}>DELETE</button>
                </td>
              </tr>
            </>) }
          </tbody>
        </table>
      </> : 'Loading...' }
    </div>
  )
}