A flexible React component that helps you display preview links with customizable styles.
You can install react-preview-link using npm:
npm install react-preview-linkor using yarn:
yarn add react-preview-linkTo use the PreviewLink component, import it into your React component and pass the props.
import React from 'react'; import PreviewLink from 'react-preview-link'; const MyComponent = () => { return ( <PreviewLink url="https://github.com" /> ); };import React from 'react'; import PreviewLink from 'react-preview-link'; const MyComponent = () => { return ( <PreviewLink url="https://github.com" width={300} height={200} margin={10} border="1px solid #ccc" direction="horizontal" reverse={false} imageCoverage={70} content={{ vertical: 'center', horizontal: 'start', margin: 5, gap: 5, }} image={{ borderRadius: 8, margin: 5, }} /> ); }; export default MyComponent;The PreviewLink component accepts the following props:
type PreviewLinkProps = { url: string, width: number, height: number, margin: number, border: string, direction: Direction, reverse: boolean, imageCoverage: number, content: { vertical?: AlignmentDirection, horizontal?: AlignmentDirection, margin?: number | string, gap?: number, }, image: { borderRadius?: number | string, margin?: number | string, }, };| Prop | Type | Description |
|---|---|---|
url | string | The URL of the preview link. |
width | number | The width of the preview container. |
height | number | The height of the preview container. |
margin | number | The margin around the preview container. |
border | string | The border style of the preview container. |
direction | 'horizontal' or 'vertical' | The direction of content alignment. |
reverse | boolean | Whether to reverse the content and image positions. |
imageCoverage | number (0 to 100) | The coverage percentage of the image on the preview. |
content | { vertical?, horizontal?, margin?, gap? } | Object containing content alignment and spacing settings. |
image | { borderRadius?, margin? } | Object containing image styling settings. |
It is not on the table but adding thekey prop is highly recommended. It is important especially if you have multiple PreviewLink. More information about key prop: https://react.dev/learn/rendering-lists#rules-of-keys
- Initial production release
- Added 4 layout option to preview link
- Seperated style option for image and content
Here are some ideas and planned features for future releases of react-preview-link:
- Demo: Add demo images and create a showcase
- Examples: Create examples folder to provide different layout examples.
- Enhanced Styling: Provide more built-in styles for the preview link. Primary and secondary color
- Content Manipulation: Handle link title and link description with callback. (For example: get substring of description)
- Caching: Cache the requested links for a while to decrease latency.
- Image Lazy Loading Animation: Add a simple lazy loading system for image. (Maybe with: https://loading.io/css/)
This project is licensed under the MIT License.
- ChatGPT: (for helping me create this file)