@axetroy/marquee

Marquee component for Vue & React

Online Demo

Installation

npm install @axetroy/marquee

Usage

Using with Vue

<template>
  <v-marquee style="width: 300px">
    Parcel can take any type of file as an entry point, but a HTML or JavaScript
    file is a good place to start. If you link your main JavaScript file in the
    HTML using a relative path, Parcel will also process it for you, and replace
    the reference with a URL to the output file.
  </v-marquee>
</template>

<script>
import Marquee from "@axetroy/marquee/vue";

export default {
  components: {
    "v-marquee": Marquee
  }
};
</script>

Using in React

import React from "react";
import Marquee from "@axetroy/marquee/react";

class App extends React.Component {
  render() {
    return (
      <Marquee style={{ width: 300 }}>
        Parcel can take any type of file as an entry point, but a HTML or
        JavaScript file is a good place to start. If you link your main
        JavaScript file in the HTML using a relative path, Parcel will also
        process it for you, and replace the reference with a URL to the output
        file.
      </Marquee>
    );
  }
}

Props

Prop	Description	Defaults
pauseOnHover	pause when hover on it.	false

Methods

Method	Description
pause()	pause Marquee component.
start()	(re)start Marquee component.

Browsers support

IE / Edge	Firefox	Chrome	Safari
IE9, IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions

IE11 require polyfill Object.assign()

IE10 require polyfill new Set() and new Map()

License

The MIT License