Storie Component

Un componente flexible y personalizable para mostrar historias (stories) al estilo de redes sociales en tus aplicaciones React.

🚀 Características

• Soporte para múltiples tipos de contenido: imágenes, videos, YouTube, contenido JSX personalizado.
• Duración personalizable: define cuántos segundos dura cada historia.
• Interactividad: pausa, reanuda y avanza las historias con facilidad.
• Estilo adaptable: personaliza el aspecto visual según tus necesidades.

🛠 Instalación

Primero, instala el paquete usando npm o yarn:

npm install storie-component
# o
yarn add storie-component

💻 Uso

Importa el componente y pásale un array de historias como propiedad content. Cada historia debe incluir un tipo (type) y el contenido asociado.

🔧 Propiedades

Props principales

| Propiedad | Tipo | Descripción | Obligatoria | |------------------|---------------------|-----------------------------------------------------------------------------|-------------| | content | TContent[] | Array de historias (puede incluir imágenes, videos, YouTube y JSX). | ✅ | | seconds | number | Duración de cada historia en segundos. | ✅ | | progress | boolean | Muestra u oculta la barra de progreso. | ❌ |

Tipos de contenido

1. Imagen (type: 'image'):

   • url: URL de la imagen.

2. YouTube (type: 'youtube'):

   • url: URL del video en formato embebido (https://www.youtube.com/embed/...).

3. Contenido JSX (type: 'jsx'):

   • content: Función que retorna un componente JSX. Se recibe la prop isPlay para manejar el estado de reproducción.
   • styles: (Opcional) Objeto de estilos para personalizar el fondo o color.

4. Video (type: 'video'):

   • url: URL del video.
   • fullscreen: (Opcional) Si el video debe mostrarse en pantalla completa (true por defecto).
   • muted: (Opcional) Si el video está silenciado.

📦 Instalación del paquete

Si necesitas compilar el proyecto antes de publicarlo:

npm run build

Asegúrate de que las dependencias de peerDependencies estén correctamente configuradas para React y ReactDOM.

🖌 Personalización

Puedes personalizar los estilos agregando tu propio archivo CSS o modificando el objeto styles en las historias JSX.

📚 Ejemplo más avanzado

const advancedArray = [
  {
    type: 'image',
    url: 'https://via.placeholder.com/360x640',
  },
  {
    type: 'video',
    url: 'https://cdn.example.com/sample-video.mp4',
    muted: true,
    fullscreen: false,
  },
  {
    type: 'jsx',
    content: ({ isPlay }) => (
      <div style={{ padding: '20px', color: '#fff', backgroundColor: 'blue' }}>
        <h1>¡Hola!</h1>
        <p>Esto es contenido personalizado</p>
        <p>¿Está reproduciéndose? {isPlay ? 'Sí' : 'No'}</p>
      </div>
    ),
  },
];

<StoriesComponent content={advancedArray} seconds={10} />;

🛡 Soporte y Licencia

• Licencia: MIT.
• Contribución: Se aceptan PRs y sugerencias en el repositorio oficial.

Para preguntas, puedes contactarme en GitHub.