UNPKG

@flyerhq/react-native-link-preview

Version:

Fully customizable preview of the URL extracted from the provided text.

github.com/flyerhq/react-native-link-preview

62 lines (47 loc) • 5.18 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# React Native Link Preview [![npm](https://img.shields.io/npm/v/@flyerhq/react-native-link-preview)](https://www.npmjs.com/package/@flyerhq/react-native-link-preview) [![build](https://github.com/flyerhq/react-native-link-preview/workflows/build/badge.svg)](https://github.com/flyerhq/react-native-link-preview/actions?query=workflow%3Abuild) [![Maintainability](https://api.codeclimate.com/v1/badges/385762ec7c1e2326fb7f/maintainability)](https://codeclimate.com/github/flyerhq/react-native-link-preview/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/385762ec7c1e2326fb7f/test_coverage)](https://codeclimate.com/github/flyerhq/react-native-link-preview/test_coverage) [![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&suffix=%&query=$.typeCoverage.is&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fflyerhq%2Freact-native-link-preview%2Fmain%2Fpackage.json)](https://github.com/plantain-00/type-coverage) Fully customizable preview of the URL extracted from the provided text. <img src="https://user-images.githubusercontent.com/14123304/119363213-d727b580-bcad-11eb-8678-6e4c4a54621c.png" width="428" height="926"> ## Getting Started ```sh yarn add @flyerhq/react-native-link-preview ``` ## Usage ```ts import { LinkPreview } from '@flyerhq/react-native-link-preview' // ... return ( <LinkPreview text='This link https://github.com/flyerhq can be extracted from the text' /> ) ``` ## Props ### Required | Name | Type | Description | | ---- | ------ | ----------------------------- | | text | string | Text to extract the link from | ### Optional | Name | Type | Description | | ----------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------ | | containerStyle | [ViewStyle](https://reactnative.dev/docs/view-style-props) | Top level container style | | enableAnimation | boolean | Enables `LayoutAnimation` | | header | string | Text above the link | | metadataContainerStyle | [ViewStyle](https://reactnative.dev/docs/view-style-props) | Title, description and minimized image container style | | metadataTextContainerStyle | [ViewStyle](https://reactnative.dev/docs/view-style-props) | Title and description container style | | onPreviewDataFetched | (PreviewData) => void | Callback to get the fetched preview data | | previewData | PreviewData | Data to render instead of parsing the provided text | | renderDescription | (string) => ReactNode | Custom description render prop | | renderHeader | (string) => ReactNode | Custom header render prop | | renderImage | (PreviewDataImage) => ReactNode | Custom image render prop | | renderLinkPreview | ({ aspectRatio?: number, containerWidth: number, previewData?: PreviewData }) => ReactNode | Custom render prop | | renderMinimizedImage | (PreviewDataImage) => ReactNode | Custom minimised image render prop | | renderText | (string) => ReactNode | Custom provided text render prop | | renderTitle | (string) => ReactNode | Custom title render prop | | requestTimeout | number | Timeout after which request to get preview data should abort | | textContainerStyle | [ViewStyle](https://reactnative.dev/docs/view-style-props) | Text, title, description and minimized image container style | | touchableWithoutFeedbackProps | TouchableWithoutFeedbackProps | Top level touchable props | ## License [MIT](LICENSE)