Détail du package

@teste-ui/portal

teste-ui12MIT2.0.4

React component used to render children outside the DOM hierarchy of the parent component

react, portal, nested portal, z-index

readme

@teste-ui/portal

A wrapper for rendering components in React Portals, with support for nested portals and stacking.

Installation

yarn add @teste-ui/portal

# or

npm i @teste-ui/portal

Import components

import { Portal, PortalManager } from "@teste-ui/portal"

Render the PortalManager once at the root of your application

function App() {
  return (
    <ThemeProvider>
      <CSSReset />
      <PortalManager>{/* Your app goes here  */}</PortalManager>
    </ThemeProvider>
  )
}

Basic usage

Portals are render into the portal manager's node by default not document.body.

<div>
  <p>Welcome</p>
  <Portal>This text has been portaled</Portal>
</div>

Nested portals

Nesting portal can be very useful to build complex widgets like nested menu, popovers, modal, etc.

<Portal>
  This is a portal.
  <Portal>This is a nested portal</Portal>
</Portal>

Custom container

You can also portal elements into a custom containers. Simply pass a containerRef prop that points to the node of that element.

<>
  <div ref={ref} />
  <Portal containerRef={ref}>
    <h1>Hello world</h1>
  </Portal>
</>

changelog

Change Log

2.0.4

Patch Changes

2.0.3

Patch Changes

2.0.2

Patch Changes

  • 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

  • Updated dependencies [06f29f8cd]:

    • @teste-ui/hooks@2.0.2
    • @teste-ui/react-utils@2.0.1
    • @teste-ui/utils@2.0.2

2.0.1

Patch Changes

  • #6079 703ff594f Thanks @chr-ge! - Improve TS doc comments to include the @defaultvalue for prop types

  • Updated dependencies [f77e3c98f]:

    • @teste-ui/utils@2.0.1
    • @teste-ui/hooks@2.0.1

2.0.0

Major Changes

Patch Changes

2.0.0-next.3

Major Changes

Patch Changes

  • Updated dependencies [ed692c0ae]:
    • @teste-ui/hooks@2.0.0-next.3
    • @teste-ui/react-utils@2.0.0-next.2
    • @teste-ui/utils@2.0.0-next.2

2.0.0-next.2

Patch Changes

2.0.0-next.1

Major Changes

Patch Changes

  • Updated dependencies [41b3119f5]:
    • @teste-ui/hooks@2.0.0-next.1
    • @teste-ui/react-utils@2.0.0-next.1
    • @teste-ui/utils@2.0.0-next.1

2.0.0-next.0

Major Changes

Patch Changes

  • Updated dependencies [c390af485, 1a47fd27e]:
    • @teste-ui/hooks@2.0.0-next.0
    • @teste-ui/react-utils@2.0.0-next.0
    • @teste-ui/utils@2.0.0-next.0

1.3.10

Patch Changes

  • Updated dependencies [a3b04dc1a]:
    • @teste-ui/hooks@1.9.1

1.3.9

Patch Changes

  • Updated dependencies [73a06ae8c]:
    • @teste-ui/hooks@1.9.0

1.3.8

Patch Changes

  • Updated dependencies [5cd5cff35]:
    • @teste-ui/hooks@1.8.5

1.3.7

Patch Changes

  • e1fe48cbe Thanks @TimKolberger! - Bumped patch version for every package to fix release process. Root cause was a bug in our CI configuration.
  • Updated dependencies [e1fe48cbe]:
    • @teste-ui/hooks@1.8.4
    • @teste-ui/react-utils@1.2.3
    • @teste-ui/utils@1.10.4

1.3.6

Patch Changes

  • Updated dependencies [a870e6b94]:
    • @teste-ui/utils@1.10.3
    • @teste-ui/hooks@1.8.3

1.3.5

Patch Changes

  • #5536 a503acabe Thanks @TimKolberger! - Bumped patch version for every package to fix release process.

  • Updated dependencies [a503acabe]:

    • @teste-ui/hooks@1.8.2
    • @teste-ui/react-utils@1.2.2
    • @teste-ui/utils@1.10.2

1.3.4

Patch Changes

  • Updated dependencies [24b4333d0]:
    • @teste-ui/utils@1.10.1
    • @teste-ui/hooks@1.8.1

1.3.3

Patch Changes

1.3.2

Patch Changes

1.3.1

Patch Changes

  • #5075 b28142946 Thanks @cschroeter! - Update babel config to transpile soruces for older browsers. This fixes issues with CRA and Storybook.
  • Updated dependencies [b28142946]:
    • @teste-ui/hooks@1.7.1
    • @teste-ui/react-utils@1.2.1
    • @teste-ui/utils@1.9.1

1.3.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@teste-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    ```jsx live=false // Won't work 🎇 import { useOutsideClick } from "@teste-ui/hooks/dist/use-outside-click"

    // Works ✅ import { useOutsideClick } from "@teste-ui/hooks" ```

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

  • Updated dependencies [6095eaf9a]:
    • @teste-ui/hooks@1.7.0
    • @teste-ui/react-utils@1.2.0
    • @teste-ui/utils@1.9.0

1.2.11

Patch Changes

  • Updated dependencies [5fe9b552b, cd0893c56]:
    • @teste-ui/hooks@1.6.2
    • @teste-ui/utils@1.8.4

1.2.10

Patch Changes

1.2.9

Patch Changes

  • Updated dependencies [28af4c030]:
    • @teste-ui/hooks@1.6.0

1.2.8

Patch Changes

  • Updated dependencies [4c1071969, 43f66097b]:
    • @teste-ui/utils@1.8.2
    • @teste-ui/hooks@1.5.5

1.2.7

Patch Changes

  • Updated dependencies [4a1e4d93b]:
    • @teste-ui/utils@1.8.1
    • @teste-ui/hooks@1.5.4

1.2.6

Patch Changes

1.2.5

Patch Changes

1.2.4

Patch Changes

  • Updated dependencies [82f08867f, e9ac4cc76]:
    • @teste-ui/react-utils@1.1.2
    • @teste-ui/utils@1.7.0
    • @teste-ui/hooks@1.5.1

1.2.3

Patch Changes

1.2.2

Patch Changes

  • Updated dependencies [8b5eb9654, d1532f0b7]:
    • @teste-ui/utils@1.5.2
    • @teste-ui/hooks@1.4.0

1.2.1

Patch Changes

1.2.0

Minor Changes

Patch Changes

1.1.3

Patch Changes

1.1.2

Patch Changes

  • Updated dependencies [83ae62905, 87cc23e14]:
    • @teste-ui/hooks@1.1.5
    • @teste-ui/utils@1.3.0

1.1.1

Patch Changes

1.1.0

Minor Changes

  • e41e6b81b #3210 Thanks @segunadebayo! - - Add support for changing the container that portal is appended to. You can now pass containerRef to portal.

    • Update portal README.md and tests.
    • Add support for appendToParentPortal={false} to opt out of nested portals.
    • Fix issue with portal zIndex container where it renders elements outside of view.
    • Renamed getContainer prop to containerRef to make it possible to pass the ref directly. This affects the Modal component primarily

    ```jsx live=false // Before

    <Portal getContainer={() => ref.current}>{/* Content /}</Portal>

    // After <Portal containerRef={ref}>{/* Content /}</Portal> ```

Patch Changes

  • Updated dependencies [b572bceed]:
    • @teste-ui/hooks@1.1.3

1.0.6

Patch Changes

1.0.5

Patch Changes

  • 0d620f1d #3079 Thanks @segunadebayo! - Fixed issue where adding portalZIndex to ChakraProvider makes app unusable

  • Updated dependencies [02855588]:

    • @teste-ui/hooks@1.1.1

1.0.4

Patch Changes

1.0.3

Patch Changes

  • a98817de Thanks @segunadebayo! - - Fix issue where Portal and PortalManager renders elements outside of view.

    • Fixed issue where elements within portal used in an iframe got rendered outside of the iframe. Portal now smartly detects it's document owner and attaches its node to the correct document.body

    • Removed extra DOM node PortalManager creates. Less is more!

1.0.2

Patch Changes

  • Updated dependencies [e73878ee]:
    • @teste-ui/utils@1.0.2
    • @teste-ui/hooks@1.0.2

1.0.1

Patch Changes

  • Updated dependencies [5c482483, 204ff7e3]:
    • @teste-ui/utils@1.0.1
    • @teste-ui/hooks@1.0.1

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0 (2020-11-13)

Note: Version bump only for package @teste-ui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.8 (2020-10-29)

Bug Fixes

  • toast: allow custom render in update (eb8bff9), closes #2362

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.7 (2020-10-25)

Note: Version bump only for package @teste-ui/portal

1.0.0-rc.6 (2020-10-25)

Note: Version bump only for package @teste-ui/portal

1.0.0-rc.5 (2020-09-27)

Note: Version bump only for package @teste-ui/portal

1.0.0-rc.4 (2020-09-25)

Note: Version bump only for package @teste-ui/portal

1.0.0-rc.3 (2020-08-30)

Note: Version bump only for package @teste-ui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.2 (2020-08-09)

Note: Version bump only for package @teste-ui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.1 (2020-08-06)

Note: Version bump only for package @teste-ui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.0 (2020-07-26)

Note: Version bump only for package @teste-ui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.7 (2020-07-26)

Note: Version bump only for package @teste-ui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.6 (2020-07-15)

Note: Version bump only for package @teste-ui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.5 (2020-07-15)

Note: Version bump only for package @teste-ui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.4 (2020-07-01)

Bug Fixes

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.3 (2020-06-28)

Bug Fixes

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.2 (2020-06-21)

Bug Fixes