Giter Club home page Giter Club logo

react-star-wars-crawl's Introduction

react-star-wars-crawl

A fully composable React component that reproduces the Star Wars opening crawl.

Credit for the default styling and animation belongs to Geoff Graham, outlined in his excellent article here

Installation

npm install react-star-wars-crawl

Usage

Simply import the Crawl component. You can use the title, subTitle, and text props to achieve the default Star Wars intro.

import React from 'react'
import Crawl from 'react-star-wars-crawl'

// Import the necessary styles, or include them another way with your build process
import 'react-star-wars-crawl/lib/index.css'

const MyCrawlComponent = () => (
    <Crawl
      title="Episode IV"
      subTitle="A New Hope"
      text="It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…"
    />
)

You can also pass anything you like as a child.

<Crawl>
  <div>Anything at all</div>
</Crawl>

Available props

All default styles can be overriden. A full list of props:

  • containerStyles
  • textContainerStyles
  • crawlStyles
  • titleStyles
  • subTitleStyles
  • textStyles
  • title
  • subTitle
  • text

react-star-wars-crawl's People

Contributors

b3an5 avatar kennethormandy avatar rdubrock avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

react-star-wars-crawl's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.