React Preview Link

A flexible React component that helps you display preview links with customizable styles.

Table of Contents

• Installation
• Usage
• Props
• Changelog
• Todo
• License

Installation

You can install react-preview-link using npm:

npm install react-preview-link

or using yarn:

yarn add react-preview-link

Usage

To use the PreviewLink component, import it into your React component and pass the props.

Basic Example With Default Props

import React from 'react';
import PreviewLink from 'react-preview-link';

const MyComponent = () => {
  return (
    <PreviewLink
      url="https://github.com"
    />
  );
};

Fully Customized Example

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;

Props

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,
  },
};

Props Table

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

Changelog

Version 1.0.1 (17.08.2023)

• Initial production release
• Added 4 layout option to preview link
• Seperated style option for image and content

Todo

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/)

License

This project is licensed under the MIT License.

Thanks

• ChatGPT: (for helping me create this file)