Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/waynekim92/react-native-good-tooltip
react-native tooltip that do not interfere with user interaction
https://github.com/waynekim92/react-native-good-tooltip
component react-native tooltip ui
Last synced: about 4 hours ago
JSON representation
react-native tooltip that do not interfere with user interaction
- Host: GitHub
- URL: https://github.com/waynekim92/react-native-good-tooltip
- Owner: WayneKim92
- License: mit
- Created: 2024-08-25T08:57:13.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-01T21:06:32.000Z (5 days ago)
- Last Synced: 2024-11-01T21:08:26.665Z (5 days ago)
- Topics: component, react-native, tooltip, ui
- Language: TypeScript
- Homepage:
- Size: 1.41 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Native Good Tooltip
Tooltips do not interrupt the user's flow. I'm not positive about the flow of using the app after touching the tooltip to close it.
So this component doesn't use Modal.
## Installation
```sh
npm install react-native-good-tooltip
```
## Usage
**⚠️Warning⚠️️**
This component will need to be used with styles (z-Index and Overflow).
You will immediately see the need for zIndex if you use "bottom" placement.
Please refer to the example project and video.
```tsx
import Tooltip from 'react-native-good-tooltip';
// ...
{/* your component */}
```
## Video
## Props
## Props
| Prop | Type | Default | Description |
|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|-----------------------------------------------------------------------------------------------|
| `visible` | `boolean` | `undefined` | Whether the tooltip is visible. |
| `rerenderKey` | `any` | `undefined` | Key to force re-rendering of the tooltip. |
| `placement` | `'top' \| 'bottom' \| 'left' \| 'right'` | **required** | The position of the tooltip relative to the anchor. |
| `anchor` | `'center' \| 'left' \| 'right' \| 'top' \| 'bottom'` | `'center'` | The alignment of the tooltip relative to the anchor. |
| `offset` | `{ position?: { x?: number, y?: number }, arrow?: { x?: number, y?: number } }` | `undefined` | The offset for the tooltip and arrow position. |
| `arrowElement` | `React.ReactElement` | `undefined` | Custom arrow element. |
| `styles` | `{color?: ColorValue \| 'primary', containerStyle?: ViewStyle, tooltipStyle?: ViewStyle, arrowSize?: { width?: number, height?: number }, closeSize?: { width?: number, height?: number} }` | `undefined` | Custom styles for the tooltip. |
| `text` | `string \| React.ReactElement` | **required** | The content of the tooltip. |
| `children` | `React.ReactElement` | `undefined` | The element to which the tooltip is anchored. |
| `onPress` | `() => void` | `undefined` | Function to call when the tooltip is pressed. |
| `onVisibleChange` | `(isVisible: boolean) => void` | `undefined` | Function to call when the visibility of the tooltip changes. |
| `delayShowTime` | `number` | `0` | The delay time before showing the tooltip. |
| `autoHideTime` | `number` | `5000` | The time after which the tooltip will automatically hide. |
| `disableAutoHide` | `boolean` | `false` | Whether to disable the auto-hide feature. |
| `disablePressToClose` | `boolean` | `false` | Whether to disable the press-to-close feature. |
| `numberOfLines` | `number` | `2` | The number of lines to display in the tooltip text. |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)