React URL Preview Component

A React component that displays a preview of a URL and acts as a clickable link to redirect users to the provided website.

Table of Contents

• Demo
• Installation
• Usage
• Props
• Examples
• Contributing
• License

Demo

Check out the live demo to see the component in action.

Installation

Install the component via npm:

npm install @develevate/react-preview-link

OR via yarn

yarn add @develevate/react-preview-link

Usage

Import the component in your React application and use it within your components:

import React from 'react';
import {PreviewLink} from '@develevate/react-preview-link';

function App() {
  return (
    <div>
      <PreviewLink url="https://example.com" />
    </div>
  );
}

Props

The PreviewLink component accepts the following props:

• href (string, required): The URL to be previewed and linked.
• showHoverOverlay (boolean, optional): If true renders an overlay over the preview link component | @default true
• showHoverAnimation (boolean, optional): If true adds hover animation of popping out over the preview link | @default true
• height (number, optional): Height of the preview link component | @default 180
• width (number, optional): Width of the preview link component | @default 320

Examples

Here are a few examples demonstrating different use cases:

<div>
  <PreviewLink url="https://example.com" />
  <PreviewLink url="https://example.com" className="custom-preview" />
</div>

Feel free to explore more customization options using the CSS file used for styling here.

Contributing

Contributions are welcome! Follow these steps to contribute to the project:

• Fork the repository.
• Create a new branch for your feature or bug fix.
• Make your changes and submit a pull request.
• Please ensure your code adheres to the existing coding standards.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.