📎 Share URL Widget

Share URL Widget es un componente React reutilizable que permite al usuario copiar fácilmente la URL actual de la página con un solo clic.

Ideal para proyectos donde quieras facilitar el compartido de enlaces, ya sea en blogs, tutoriales o aplicaciones interactivas.

🚀 Instalación

npm i share-url-widget

⚙️ Requisitos

Este componente requiere React 17 o superior como peer dependency:

"peerDependencies": {
  "react": ">=17.0.0",
  "react-dom": ">=17.0.0"
}

💡 Recomendación de estilos

Se recomienda utilizar un reseteador o estandarizador CSS como stellarstyles.css para evitar conflictos de estilos visuales con los estilos base del widget, ya que:

• El componente fue diseñado para funcionar sobre fondos claros
• Aplica estilos globales específicos en su contenedor

Instalación recomendada:

npm i stellarstyles.css

Y luego, en tu entrada principal:

import "stellarstyles.css";

✨ Uso básico

import { ShareUrl } from "share-url-widget";
import "share-url-widget/dist/css/ShareUrl.css"; // Importa los estilos

function App() {
  return (
    <div>
      <h1>Mi artículo o contenido</h1>
      <ShareUrl />
    </div>
  );
}

🛠️ Props opcionales

Puedes personalizar el texto, estilos y comportamiento con los siguientes props:

| Prop | Tipo | Descripción | |-----------------|---------------------|---------------------------------------------------------------| | title | string | Título encima del input. Por defecto: ¡Comparte esta página! | | buttonText | string | Texto del botón. Por defecto: Copiar URL 📄 | | copiedMessage | string | Texto que aparece al copiar. Por defecto: ¡URL copiada! 🎊🎊🎊 | | className | string | Clases adicionales para el contenedor | | style | CSSProperties | Estilos inline opcionales para el contenedor principal |

📦 Archivos exportados

| Ruta | Descripción | |----------------------------------|--------------------------------| | dist/esm/ShareUrl.min.js | Versión ESM del componente | | dist/cjs/ShareUrl.min.js | Versión CommonJS del componente| | dist/types/ShareUrl.d.ts | Tipos TypeScript | | dist/css/ShareUrl.css | Estilos globales del componente|

📘 Licencia

MIT – © 2025 Percy Chuzon
https://share-url-widget.percychuzon.com

🐛 Reportar errores

Puedes reportar problemas o sugerencias en el repositorio de GitHub.