es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Diseño de cuadrícula para tweets dentro de TwitterTimelineEmbed

29 Jul, 2023 Programación

Estoy usando react-twitter-embed para mostrar una línea de tiempo en una página de inicio. Pero me gustaría agregar una cuadrícula CSS personalizada (los tweets, limitados a seis, deben aparecer horizontalmente y no verticalmente):

import { useTranslation } from "react-i18next";
import { TwitterTimelineEmbed } from "react-twitter-embed";
import { FollowUsOn } from "../Footer/SubModules/FollowUs/follow-us-on.component";
import { BlockTwitterBtn } from "./SubModules/block-twitter-btn.component";

export const BlockTwitter = () => {
  const { t } = useTranslation();

  return (
    

      

        
{t("common:blockTwitterTitle")}

        
        
      

      

        

          
        

      

    

  );
};

Leí que podía usar la opción onLoad con CSS personalizado, pero no sé exactamente cómo hacerlo en React…

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar una rejilla CSS personalizada al componente react-twitter-embed en React, puedes crear una clase CSS personalizada para el elemento contenedor (twitterContainer) y aplicarle las propiedades de la rejilla CSS.

    Aquí tienes un ejemplo de fragmento de código:

    import React from 'react';
import { useTranslation } from "react-i18next";
import { TwitterTimelineEmbed } from "react-twitter-embed";

import './BlockTwitter.css'; // importa tu archivo CSS personalizado

export const BlockTwitter = () => {
  const { t } = useTranslation();

  return (
    <div classname="container blockTwitter">
      <div classname="blockTwitter__firstCard">
        <h3 classname="blockTwitter__title">{t("common:blockTwitterTitle")}</h3>
        {/* otros componentes... */}
      </div>
      <section classname="twitterContainer"> {/* agrega el nombre de la clase */}
        <div classname="twitter-embed">
          <twittertimelineembed sourcetype="profile" screenname="Quebecor" options="{{" tweetlimit:="" "6",="" width:="" "100%",="" height:="" "100%"="" }}="" noheader="true" nofooter="true"></twittertimelineembed>
        </div>
      </section>
    </div>
  );
};

    Luego, en tu archivo BlockTwitter.css, puedes agregar las siguientes reglas CSS para crear un diseño de rejilla para los tweets:

    .twitterContainer {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* establece 6 columnas */
  grid-template-rows: 1fr; /* solo 1 fila */
  gap: 0.5rem; /* añade espacio entre los tweets */
}

.twitterContainer > div {
  max-width: none !important; /* anula el estilo predeterminado de max-width */
}

    Esto creará una rejilla CSS con 6 columnas y 1 fila para los tweets, y eliminará el estilo predeterminado de max-width para cada elemento de tweet. Puedes ajustar las propiedades de la rejilla según tus requisitos de diseño.

Comments are closed.