React Legal

react-legal is an open-source React component library designed for developers to easily and quickly integrate essential legal pages into their web projects.

This package provides customizable and ready-to-use components for Privacy Policy, Terms and Conditions, and Cookie Policy, using templates that meet common legal requirements for both Spanish and English-speaking markets.

Save time and effort in creating these repetitive pages and focus on developing your application's key functionalities.

Available in both Spanish and English!

🚀 Installation

npm install react-legal

yarn add react-legal

pnpm add react-legal

📋 Available Components

Spanish Components

1. AvisoDePrivacidad

Complete Privacy Notice component compliant with LFPDPPP (Mexican Federal Law for the Protection of Personal Data).

2. TerminosYCondiciones

General Terms and Conditions for Mexican websites, including provisions on use, restrictions, intellectual property, and jurisdiction.

3. PoliticaDeCookies

Complete Cookie Policy that explains cookie usage, types, management, and user rights.

English Components

4. PrivacyPolicy

Comprehensive Privacy Policy component for English-speaking markets with GDPR-aware content.

5. TermsAndConditions

General Terms and Conditions with standard legal provisions for websites and applications.

6. CookiePolicy

Complete Cookie Policy explaining cookie usage, types, management, and user rights in English.

🔧 Usage

Import

// Spanish components
import { AvisoDePrivacidad, TerminosYCondiciones, PoliticaDeCookies } from 'react-legal';

// English components
import { PrivacyPolicy, TermsAndConditions, CookiePolicy } from 'react-legal';

// Or import specific components as needed
import { PrivacyPolicy, AvisoDePrivacidad } from 'react-legal';

AvisoDePrivacidad

<AvisoDePrivacidad
  businessName="Mi Empresa S.A. de C.V."
  websiteURL="https://miempresa.com"
  supportEmail="[email protected]"
  fullLocation="Av. Insurgentes Sur 123, Col. Roma Norte, 06700, CDMX, México" // Opcional
  className="custom-styles" // Opcional
/>

Props Requeridas:

• businessName: Nombre de tu empresa
• websiteURL: URL de tu sitio web
• supportEmail: Correo de contacto para temas de privacidad

Props Opcionales:

• fullLocation: Dirección completa de la empresa
• className: Clases CSS personalizadas

TerminosYCondiciones

<TerminosYCondiciones
  businessName="Mi Empresa S.A. de C.V."
  websiteURL="https://miempresa.com"
  supportEmail="[email protected]"
  shortAddress="Ciudad de México, México"
  className="custom-styles" // Opcional
/>

Props Requeridas:

• businessName: Nombre de tu empresa
• websiteURL: URL de tu sitio web
• supportEmail: Correo de contacto para temas legales
• shortAddress: Dirección corta para jurisdicción legal

Props Opcionales:

• className: Clases CSS personalizadas

PoliticaDeCookies

<PoliticaDeCookies
  businessName="Mi Empresa S.A. de C.V."
  websiteURL="https://miempresa.com"
  supportEmail="[email protected]"
  className="custom-styles" // Opcional
/>

Props Requeridas:

• businessName: Nombre de tu empresa
• websiteURL: URL de tu sitio web
• supportEmail: Correo de contacto para temas de cookies

Props Opcionales:

• className: Clases CSS personalizadas

English Components

PrivacyPolicy

<PrivacyPolicy
  businessName="My Company Inc."
  websiteURL="https://mycompany.com"
  supportEmail="[email protected]"
  fullLocation="123 Main Street, New York, NY 10001, USA" // Optional
  className="custom-styles" // Optional
/>

Required Props:

• businessName: Your company name
• websiteURL: Your website URL
• supportEmail: Contact email for privacy matters

Optional Props:

• fullLocation: Complete company address
• className: Custom CSS classes

TermsAndConditions

<TermsAndConditions
  businessName="My Company Inc."
  websiteURL="https://mycompany.com"
  supportEmail="[email protected]"
  shortAddress="New York, USA"
  className="custom-styles" // Optional
/>

Required Props:

• businessName: Your company name
• websiteURL: Your website URL
• supportEmail: Contact email for legal matters
• shortAddress: Short address for legal jurisdiction

Optional Props:

• className: Custom CSS classes

CookiePolicy

<CookiePolicy
  businessName="My Company Inc."
  websiteURL="https://mycompany.com"
  supportEmail="[email protected]"
  className="custom-styles" // Optional
/>

Required Props:

• businessName: Your company name
• websiteURL: Your website URL
• supportEmail: Contact email for cookie-related matters

Optional Props:

• className: Custom CSS classes

🎨 Estilos

Los componentes incluyen estilos base con Tailwind CSS. Puedes:

1. Usar los estilos incluidos: Los componentes ya vienen estilizados
2. Personalizar con className: Agregar tus propias clases CSS
3. Sobrescribir estilos: Usar CSS personalizado para modificar la apariencia

Estructura CSS

Todos los componentes están envueltos en:

.legal-stuff {
  /* Estilos base */
}

🌟 Características

• ✅ Completo: Textos legales detallados y profesionales
• ✅ Personalizable: Props para adaptar a tu negocio
• ✅ Responsive: Diseño adaptativo para todos los dispositivos
• ✅ TypeScript: Tipado completo incluido
• ✅ Fácil integración: Funciona con cualquier proyecto React
• ✅ Marco legal mexicano: Adaptado a la legislación de México
• ✅ Sin dependencias extras: Solo requiere React

📱 Ejemplo Completo

import React from 'react';
import { AvisoDePrivacidad, TerminosYCondiciones, PoliticaDeCookies } from 'react-legal';

function App() {
  const companyInfo = {
    businessName: 'TechCorp S.A. de C.V.',
    websiteURL: 'https://techcorp.mx',
    supportEmail: '[email protected]',
    fullLocation: 'Av. Reforma 123, Polanco, 11560, CDMX, México',
    shortAddress: 'Ciudad de México, México',
  };

  return (
    <div>
      <h1>Páginas Legales</h1>

      <AvisoDePrivacidad businessName={companyInfo.businessName} websiteURL={companyInfo.websiteURL} supportEmail={companyInfo.supportEmail} fullLocation={companyInfo.fullLocation} />

      <TerminosYCondiciones businessName={companyInfo.businessName} websiteURL={companyInfo.websiteURL} supportEmail={companyInfo.supportEmail} shortAddress={companyInfo.shortAddress} />

      <PoliticaDeCookies businessName={companyInfo.businessName} websiteURL={companyInfo.websiteURL} supportEmail={companyInfo.supportEmail} />
    </div>
  );
}

export default App;

⚖️ Marco Legal

Los componentes están diseñados siguiendo:

• LFPDPPP - Ley Federal de Protección de Datos Personales en Posesión de Particulares
• Código Civil Federal - Para términos y condiciones contractuales
• Ley Federal de Protección al Consumidor - Para relaciones comerciales
• Mejores prácticas de privacidad y cookies en México

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Si encuentras algún problema o tienes sugerencias:

1. Abre un Issue
2. Envía un Pull Request
3. Sugiere mejoras o nuevos componentes

📄 Licencia

MIT © Luis Marroquin

⚠️ Nota Importante

Este paquete proporciona plantillas legales generales que pueden no ser adecuadas para todos los casos de uso. Se recomienda encarecidamente:

• Consultar con un abogado especializado antes de usar en producción
• Revisar y adaptar los textos según las necesidades específicas de tu negocio
• Mantenerse actualizado sobre cambios en la legislación mexicana
• Considerar regulaciones específicas de tu industria

Los autores de este paquete no se hacen responsables del uso inadecuado o de las consecuencias legales derivadas del uso de estos componentes.

📦 Versioning

Este proyecto utiliza Semantic Versioning.

• Major: Cambios que rompen compatibilidad
• Minor: Nuevas funcionalidades compatibles
• Patch: Correcciones de bugs compatibles

🏷️ Keywords

React, México, Aviso de Privacidad, Términos y Condiciones, Política de Cookies, LFPDPPP, Legal, Componentes, TypeScript, Tailwind