Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oleystack/native-portal
🌀 Efficient Portals for React Native
https://github.com/oleystack/native-portal
Last synced: about 12 hours ago
JSON representation
🌀 Efficient Portals for React Native
- Host: GitHub
- URL: https://github.com/oleystack/native-portal
- Owner: oleystack
- License: mit
- Created: 2023-01-17T02:18:40.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-20T04:50:25.000Z (over 1 year ago)
- Last Synced: 2024-12-14T22:49:03.829Z (27 days ago)
- Language: TypeScript
- Size: 1.21 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@bit-about/native-portal
## Install
```bash
npm i @bit-about/native-portal
```
## Features
- 100% **Idiomatic React** and 100% Typescript
- Tiny & Efficient
- Does not trigger unnecessary renderings
- **Just works** ™
## Usage
```tsx
import { portal } from '@bit-about/native-portal'
// 1️⃣ Create a portal
const Portal = portal()
// 2️⃣ Wrap your app with Provider
const App = () => (
{/* ... */}
)
```
⬜ Set injection target
```tsx
const ComponentA = () => (
<>
>
)
```
🌀 ...then inject content from elsewhere
```tsx
const ComponentB = () => (
<>
Hello!
>
)
```
Thanks to this,
when the `ComponentB` is rendered,
the `Hello!` sentence will be moved to the `ComponentA`.
## Many portals under one provider
```tsx
import { portal } from '@bit-about/native-portal'
// Declare destinations during portal creation
const Portal = portal('toHeader', 'toMenu', 'toHeaven')
```
⬜ Set injection target using `name` prop
```tsx
const Menu = () => (
<>
>
)
```
🌀 ...then inject content using `name` prop
```tsx
const Screen = () => (
<>
{'New menu option'}
>
)
```
## Default content
To declare fallback content for portal that is not in use, you can just pass `children` prop to `Target` component.
```tsx
{'I am only visible when no content has been injected.'}
```
## Don't you like the default names?
```tsx
import { portal } from '@bit-about/native-portal'
const {
Provider: MyAmazingProvider,
Target: MyAmazingTarget,
Injector: MyAmazingInjector,
} = portal()
// ... and then
const App = () => (
{/* ... */}
)
```
## Common Questions
##### ► What happens if I use multiple `Injectors` for one portal at the same time?
It works like a stack. The `Target` will render the latest content.
If the newest `Injector` is unmounted, the `Target` will render the previous one.
##### ► What happens if I use multiple `Targets` for one portal at the same time?
Each `Target` will display the same content.
##### ► Do I need to render `Target` before the `Injectors`?
Nope!
When you render `Target` it will be automatically filled up by the injected content.
##### ► Is this efficient? What about the re-renders?
Yes.
Moreover, `Providers` and `Injectors` will be never unecessary re-rendered.
`Target` rerender only when the latest injected content changes.
## Partners
## Credits
- [use-context-selector](https://github.com/dai-shi/use-context-selector) & [FluentUI](https://github.com/microsoft/fluentui) - fancy re-render avoiding tricks and code main inspiration
## License
MIT © [Maciej Olejnik 🇵🇱](https://github.com/macoley)
## Support me
If you use my library and you like it...
it would be nice if you put the name `BitAboutNativePortal` in the work experience section of your resume.
Thanks 🙇🏻!
---
🇺🇦 Slava Ukraini