Skip to content

Commit 708bca3

Browse files
gorhomgorhom
committedJan 28, 2021
docs: updated readme file
1 parent 5f6d60e commit 708bca3

File tree

7 files changed

+143
-3
lines changed

7 files changed

+143
-3
lines changed
 

‎README.md

+125-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,135 @@
11
# React Native Portal
22

3+
[![Base UI](https://img.shields.io/npm/v/@gorhom/portal?style=flat-square)](https://www.npmjs.com/package/@gorhom/portal) [![npm](https://img.shields.io/npm/l/@gorhom/portal?style=flat-square)](https://www.npmjs.com/package/@gorhom/portal) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@gorhom/portal) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://snack.expo.io/@gorhom/portal-example)
4+
35
A simplified portal implementation for ⭕️ React Native ⭕️.
46

7+
![React Native Bottom Sheet](./preview.jpg)
8+
9+
---
10+
11+
## Features
12+
13+
- Multi portals handling.
14+
- Allow override functionality.
15+
- Compatible with `React Native Web`.
16+
- Compatible with `Expo`, [check out the project Expo Snack](https://snack.expo.io/@gorhom/portal-example).
17+
- Written in `TypeScript`.
18+
519
## Installation
620

721
```sh
822
yarn add @gorhom/portal
923
```
1024

11-
> Soon ;)
25+
## Usage
26+
27+
```tsx
28+
import React from 'react';
29+
import { StyleSheet, Text, View } from 'react-native';
30+
import { Portal, PortalHost } from '@gorhom/portal';
31+
32+
const BasicScreen = () => {
33+
return (
34+
<View style={styles.container}>
35+
<View style={styles.box}>
36+
<Text style={styles.text}>
37+
Text won't be teleported!
38+
<Portal>
39+
<Text style={styles.text}>Text to be teleported</Text>
40+
</Portal>
41+
</Text>
42+
</View>
43+
</View>
44+
);
45+
};
46+
47+
const styles = StyleSheet.create({
48+
container: { flex: 1 },
49+
box: {
50+
padding: 24,
51+
backgroundColor: '#333',
52+
},
53+
text: {
54+
alignSelf: 'center',
55+
textAlign: 'center',
56+
margin: 24,
57+
backgroundColor: '#eee',
58+
},
59+
});
60+
61+
export default () => (
62+
<PortalHost>
63+
<BasicScreen />
64+
{/* Text will be teleported to here */}
65+
</PortalHost>
66+
);
67+
```
68+
69+
## Props
70+
71+
### `name`
72+
73+
Portal key or name to be used internally.
74+
75+
> `required:` NO | `type:` string | `default:` auto generated unique key
76+
77+
### `handleOnMount`
78+
79+
Override internal mounting functionality, this is useful if you want to trigger any action before mounting the portal content.
80+
81+
```ts
82+
type handleOnMount = (mount?: () => void) => void;
83+
```
84+
85+
> `required:` NO | `type:` function | `default:` undefined
86+
87+
### `handleOnUnmount`
88+
89+
Override internal un-mounting functionality, this is useful if you want to trigger any action before un-mounting the portal content.
90+
91+
```ts
92+
type handleOnUnmount = (unmount?: () => void) => void;
93+
```
94+
95+
> `required:` NO | `type:` function | `default:` undefined
96+
97+
### `children`
98+
99+
Portal content.
100+
101+
> `required:` NO | `type:` ReactNode | ReactNode[] | `default:` undefined
102+
103+
## Hooks
104+
105+
### `usePortal`
106+
107+
To access internal mounting and un-mounting functionality of any portal.
108+
109+
> `type:` [PortalMethods](./src/types.ts#L3)
110+
111+
<h2 id="built-with">Built With ❤️</h2>
112+
113+
- [@react-native-community/bob](https://github.com/react-native-community/bob)
114+
115+
## Author
116+
117+
- [Mo Gorhom](https://gorhom.dev/)
118+
119+
## License
120+
121+
[MIT](./LICENSE)
122+
123+
<div align="center">
124+
125+
Liked the library? 😇
126+
127+
<a href="https://www.buymeacoffee.com/gorhom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" height="34" ></a>
128+
129+
</div>
130+
131+
---
132+
133+
<p align="center">
134+
<a href="https://gorhom.dev" target="_blank"><img height="48" alt="Mo Gorhom" src="./gorhom.png"></a>
135+
</p>

‎example/.expo-shared/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
> Why do I have a folder named ".expo-shared" in my project?
2+
3+
The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
4+
5+
> What does the "assets.json" file contain?
6+
7+
The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
8+
9+
> Should I commit the ".expo-shared" folder?
10+
11+
Yes, you should share the ".expo-shared" folder with your collaborators.

‎example/.expo-shared/assets.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎example/app.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
"displayName": "React Native Portal Example",
44
"expo": {
55
"name": "@gorhom/portal-example",
6-
"slug": "@gorhom/portal-example",
7-
"description": "Example app for @gorhom/portal-example",
6+
"slug": "portal-example",
7+
"owner": "gorhom",
8+
"description": "A simplified portal implementation for ⭕️ React Native ⭕️",
89
"privacy": "public",
910
"version": "1.0.0",
11+
"githubUrl": "https://github.com/gorhom/react-native-portal",
1012
"platforms": [
1113
"ios",
1214
"android",

‎gorhom.png

3.83 KB
Loading

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
"lib"
1313
],
1414
"keywords": [
15+
"expo",
16+
"react-native-web",
1517
"react-native",
1618
"ios",
1719
"android",

‎preview.jpg

96.4 KB
Loading

0 commit comments

Comments
 (0)