Skip to content

Commit d62c4d9

Browse files
StringsaeedStringsaeed
committed
chore: add README documentation
1 parent 89a4760 commit d62c4d9

File tree

5 files changed

+166
-8
lines changed

5 files changed

+166
-8
lines changed

‎.github/images/with-overlay-android.png‎

38.8 KB
Loading

‎.github/images/with-overlay-ios.png‎

95.4 KB
Loading

‎.github/images/without-overlay-android.png‎

39.1 KB
Loading

‎.github/images/without-overlay-ios.png‎

95.6 KB
Loading

‎README.md‎

Lines changed: 166 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,181 @@
1-
# react-native-tooltiplize
1+
# `react-native-tooltiplize`
22

3-
tooltiplize
3+
react native tooltip like never before, using leading packages like `react-native-reanimated` v2, `framer-motion`, and `@gorhom/portal`
4+
5+
6+
7+
## Preview
8+
9+
| With Overlay (iOS) | Without Overlay (iOS) | Without Overlay (Android) | With Overlay (Android) |
10+
| ----------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------ | --------------------------------------------------------- |
11+
| ![With Overlay (iOS)](.github/images//with-overlay-ios.png) | ![With Overlay](.github/images//without-overlay-ios.png) | ![With Overlay](.github/images//without-overlay-android.png) | ![With Overlay](.github/images//with-overlay-android.png) |
12+
13+
## Features
14+
15+
- iOS, Android, and Web!!!
16+
- Fully customizable
17+
- Simple and Clean API
18+
- Works for all `reanimated`'s v2 versions
19+
- Far away from `Modal` issues
20+
- 60 FPS
21+
- Less boilerplate
22+
- Built for already in production app
23+
- And more...
424

525
## Installation
626

7-
```sh
8-
npm install react-native-tooltiplize
27+
```bash
28+
yarn add react-native-tooltiplize
29+
```
30+
#### Peer Dependencies
31+
32+
This library needs some peer dependencies to work properly. You need to install them in your project.
33+
34+
- for `react-native-cli` users:
35+
36+
1. install peer dependencies:
37+
38+
```bash
39+
yarn add react-native-reanimated @gorhom/portal
40+
```
41+
42+
2. For iOS:
43+
44+
```bash
45+
cd ios && pod install
46+
```
47+
48+
- for `expo` users:
49+
50+
```bash
51+
expo install react-native-reanimated @gorhom/portal
952
```
1053

54+
55+
1156
## Usage
1257

13-
```js
14-
import { multiply } from 'react-native-tooltiplize';
58+
you first need to wrap your app with `PortalProvider` from `@gorhom/portal` to provide a context for the `Portal`.
59+
60+
```tsx
61+
import { PortalProvider } from '@gorhom/portal';
62+
63+
const App = () => {
64+
return (
65+
<PortalProvider>
66+
<App />
67+
</PortalProvider>
68+
);
69+
};
70+
```
71+
then you can use the `Tooltip` component
72+
73+
```tsx
74+
import React from 'react';
75+
import Tooltip from 'react-native-tooltiplize';
76+
import { PortalProvider } from '@gorhom/portal';
77+
import { View, TouchableOpacity, StyleSheet, Text } from 'react-native';
78+
79+
const App = () => {
80+
const [isVisible, toggle] = React.useReducer((state) => !state, false);
81+
82+
const renderContent = React.useCallback(() => {
83+
return (
84+
<TouchableOpacity style={styles.tooltipContainer} onPress={toggle}>
85+
<Text style={styles.tooltipText}>
86+
Welcome to React Native Tooltiplize 🥳
87+
</Text>
88+
</TouchableOpacity>
89+
);
90+
}, []);
91+
92+
return (
93+
<PortalProvider>
94+
<View style={styles.container}>
95+
<Tooltip
96+
position="top"
97+
offset={8}
98+
renderContent={renderContent}
99+
isVisible={isVisible}
100+
withOverlay
101+
onDismiss={toggle}
102+
pointerStyle={styles.pointer}
103+
pointerColor="green"
104+
>
105+
<TouchableOpacity onPress={toggle} style={styles.newFeature}>
106+
<Text style={styles.newFeatureText}>This is new cool feature</Text>
107+
</TouchableOpacity>
108+
</Tooltip>
109+
</View>
110+
</PortalProvider>
111+
);
112+
};
15113
16-
// ...
114+
export default App;
17115
18-
const result = await multiply(3, 7);
116+
const styles = StyleSheet.create({
117+
container: {
118+
flex: 1,
119+
justifyContent: 'center',
120+
alignItems: 'center',
121+
},
122+
tooltipContainer: {
123+
paddingHorizontal: 16,
124+
paddingVertical: 8,
125+
borderRadius: 8,
126+
shadowColor: '#000',
127+
shadowOffset: {
128+
width: 0,
129+
height: 2,
130+
},
131+
shadowOpacity: 0.1,
132+
shadowRadius: 12,
133+
elevation: 5,
134+
backgroundColor: 'green',
135+
},
136+
tooltipText: {
137+
fontSize: 12,
138+
color: 'white',
139+
},
140+
pointer: { width: 16, height: 8 },
141+
newFeature: {
142+
backgroundColor: 'white',
143+
padding: 16,
144+
borderRadius: 8,
145+
},
146+
newFeatureText: {
147+
fontSize: 16,
148+
},
149+
});
19150
```
20151
152+
153+
154+
## Props
155+
156+
| Name | Type | ? | Default | Description |
157+
| --------------- | ------------------ | --- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
158+
| `isVisible` | `boolean` | ✅ | `undefined` | Determines whether the tooltip is visible or not. |
159+
| `renderContent` | `() => ReactNode` | ✅ | `undefined` | the content of the tooltip |
160+
| `children` | `ReactNode` | ✅ | `undefined` | the children component that the tooltip will point to |
161+
| `withOverlay` | `boolean` | ❌ | `undefined` | whether or not to render overlay behind the `children` and the `Tooltip` |
162+
| `onDismiss` | `() => void` | ❌ | `undefined` | a function to be called when the user presses on the overlay |
163+
| `overlayStyle` | `ViewStyle` | ❌ | `undefined` | a style object to customize how `Overlay` looks |
164+
| `offset` | `number` | ❌ | `0` | a distance added between the `Tooltip` and the `children`, Please note that the `Pointer` size is calculated separately |
165+
| `pointerStyle` | `ViewStyle` | ❌ | `undefined` | a style object to customize `Pointer` looks, <br />Please note: the only available styles in only `width` and `height` |
166+
| `pointerColor` | `string` | ❌ | `"#000000"` | The `Pointer`'s color |
167+
| `position` | `string` | ❌ | `top` | `top`, `bottom`, `left`, and `right`, to control the placement of the `Tooltip` |
168+
| `timingConfig` | `WithTimingConfig` | ❌ | `{ duration: 300 }` | the timing config for animating opening and closing of the `Tooltip` and `Overlay`, <br />Please note: that is from [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/api/animations/withTiming) |
169+
| `childrenStyle` | `ViewStyle` | ❌ | `undefined` | the style of `children` |
170+
171+
172+
173+
## TODO:
174+
175+
- [ ] Handle Safe Area and Window dimensions
176+
- [ ] Adding Support for more animation types
177+
- [ ] Unit Testing
178+
21179
## Contributing
22180
23181
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

0 commit comments

Comments
 (0)