# react-link-preview

> Wrap your React Router Link with the React Link Preview and feed it a component. You'll get a modal with a preview of that component on long-press and a regular link otherwise.

Latest version **0.1.3** (published 2018-05-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-link-preview
pnpm add react-link-preview
yarn add react-link-preview
bun add react-link-preview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-05-01 |
| First published | 2018-04-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 95.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Paul Jarrow |
| Maintainers | thinkinbox_developer |
| Keywords | react, link, preview, modal, long, press, long-press, longpress |

## Links

- npm: https://www.npmjs.com/package/react-link-preview
- Repository: https://github.com/thinkingboxmedia/react-link-preview
- Homepage: https://github.com/thinkingboxmedia/react-link-preview#readme
- Issues: https://github.com/thinkingboxmedia/react-link-preview/issues
- npm.io page: https://npm.io/package/react-link-preview

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2018-05-01
- 0.1.2 — 2018-04-30
- 0.1.1 — 2018-04-30
- 0.1.0 — 2018-04-27

## README

# LinkPreview React Component
_A Thinkingbox Endeavour_

**Demo: [LinkPreview Github Page](https://thinkingboxmedia.github.io/react-link-preview/)**

### Adding it to your react project

`import 'LinkPreview' from 'react-link-preview';`

### Forking this component

Start the dev server:  
`npm run dev`

Compile the production version of the demo (do this before pushing to master or making an MR/PR):  
`npm run docs:prod`

Compile the distribution version of the component (do this before pushing to master or to NPM):  
`npm run dist-build`

### What it is

This wrapper adds a modal preview to links or buttons -- on long-press -- that displays any react component you provide. 
A small progress bar shows the long-press progress.
This is a very simple component that wraps the `react-router-dom <Link />` component with a bit of added functionality.

### How it works

Wrap any link or button with `<LinkPreview></LinkPreview` to get a modal pop-up preview of the component you supply.
This might be the react route component you intend to send the user to, or another component with useful preview information.

This component is intended for use on mobile devices primarily, but can be toggled to be used on desktop as well.

### Example usage:

```javascript
<LinkPreview to="/preview-me"
              mobileOnly={false}
              loadBarAbove={false}
              previewComponent={<PreviewMe />}>
  This text can be any element you like instead
</LinkPreview>
```

### Available properties:

Property | Default | Required? | Description
-------- | ------- | --------- | -----------
**previewComponent** | N/A | yes | A component to show in the preview.
**clickWindow** | 500 | no | The window of time (ms) where a regular click is registered.
**longPressTime** | 1000 | no | The time (ms) it takes the user to hold before it's considered a longpress.
**mobileOnly** | true | no | Setting this to false allows the preview to work on desktop, too.
**loadBarAbove** | true | no | Settings this to false moves the longpress bar below your link.

---
_Source: https://npm.io/package/react-link-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._