@develevate/react-preview-link

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

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

Prop name	Type	Default value	Description
url	string		URL to be previewed.
showHoverOverlay	boolean	true	If true renders an overlay over the preview link component
showHoverAnimation	boolean	true	If true adds hover animation of poping out over the preview link.
height	number	180	Height of the preview link component
width	string	320	Width of the preview link component

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.

GitHub Repository

You can drop a star on the GitHub repository if you find this project useful. Also, feel free to open an issue if you face any problem or if you would like to suggest an improvement.