Scrolling Text

Um componente de fundo dinâmico que percorre uma lista de textos em um intervalo especificado.

Opções

• text | (string|array<string>): texto ou lista de textos a serem exibidos. Default: [].
• loop | boolean: indica se o processo deve ser exibido infinitamente. Default: false.
• direction | string: a direção do fluxo do texto (ou left, right, "para cima", "para baixo", "para baixo", "focagem", ou "redemoinho"). Default: 'right'.
• hold | number: o tempo que o texto permanece parado (em segundos). Default: 5.
• wait | number: o tempo antes da chegada de um novo texto (em segundos). Default: 3.
• inTime | number: tempo do efeito de entrada (em segundos). Default: 1.
• outTime | number: tempo do efeito de saída (em segundos). Default: 1.
• className | string: nome da classe. Default: ''.
• style | object: Estilos de CSS do texto. Default: {}.

Exemplos

• Minimal
• List of Texts
• Background Image

Editor ao vivo

<ScrollingText text="This is a text re-appearing every five seconds" style={{ fontSize: 44, color: 'blue' }} wait={5} hold={2} loop />

<ScrollingText
    text="This is a text re-appearing every five seconds"
    style={{ fontSize: 44, color: 'blue' }}
    wait={5}
    hold={2}
    loop
/>

Resultado

ReferenceError: Provider is not defined