/react-quotes-rotator

react library's quotes rotator with progress bar

Primary LanguageJavaScript

react-quotes-rotator

React Quotes Rotator.

Description

React Quotes Rotator is Quotes Component for React

Demo

react-quotes-rotator

Install

$ npm i react-quotes-rotator

Usage

import QuotesRotator from "react-quotes-rotator";
export const quotes = [
    {
        title: "50 Inspirational Quotes For Startups And Entrepreneurs",
        content:
            "If you just work on stuff that you like and you’re passionate about, you don’t have to have a master plan with how things will play out.",
        footnote: "Mark Zuckerberg, Facebook Founder and CEO",
        pic: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Mark_Zuckerberg_cropped.jpg/220px-Mark_Zuckerberg_cropped.jpg"
    },
    {
        title: "50 Inspirational Quotes For Startups And Entrepreneurs",
        content:
            "Any time is a good time to start a company.",
        footnote: "Ron Conway, Noted Startup Investor, SV Angel",
        pic: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsDzSJUGCynBe_5AsxFMa5di6NDl79jlhaXU_GjzfKXvUYfQv2"
    },
    {
        title: "50 Inspirational Quotes For Startups And Entrepreneurs",
        content:
            "Ideas are commodity. Execution of them is not.",
        footnote: "Michael Dell, Dell Chairman and CEO",
        pic: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvWiBIth-yWVarg0-P9t2-tzktb0H9w5RXtCN1l5YxSruAtyfbMQ"
    },
    {
        title: "50 Inspirational Quotes For Startups And Entrepreneurs",
        content:
            "The way to get started is to quit talking and start doing.",
        footnote: "Walt Disney, Co-Founder, Disney",
        pic: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Walt_Disney_1946.JPG/220px-Walt_Disney_1946.JPG"
    }
];
ReactDOM.render(<div>
    <QuotesRotator
        data={quotes}
        progressBarColor="#B5D43C"
        backgroundColor="#fff"
        textColor="#212121"
        timer="5000"
    />
</div>, container);

API

props

name type description
data Array Objects Data of quotes
progressBarColor String Progress bar color.
backgroundColor String Background color.
textColor String Text color (title, content, footnote).
timer Number Time per quotes display.