• Stars
    star
    244
  • Rank 165,885 (Top 4 %)
  • Language
    JavaScript
  • Created almost 11 years ago
  • Updated almost 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Example code for router which does animated page transitions using ReactCSSTranstionGroup

React-Router-Component-Transition

A simple component that overrides <Locations> in React-Router-Component to animate page transitions.

View the Demo

Install

npm install react-router-component-transition
var AnimatedLocations = require('react-router-component-transition');

Usage

Simply replace any usage of <Locations> in your app with <AnimatedLocations>.

View the source for more details and comments.

You can also change the transition used on a particular link by using the prop transitionName, or shut off transitions entirely by using the prop noTransition.

View the demo source for more usage details.

Development

To run the demo locally and tinker:

% git clone https://github.com/strml/react-router-page-transition.git
% npm install
% npm run develop
% open index.html

More Repositories

1

strml.net

STRML: Projects & Work
JavaScript
2,576
star
2

react-router-component

Declarative router component for React.
JavaScript
874
star
3

textFit

A jQuery-free component that quickly fits single and multi-line text to the width (and optionally height) of its container.
JavaScript
598
star
4

keyMirror

Simple util to create an object with its keys mirrored as values. Standalone port of react/lib/keyMirror.
JavaScript
386
star
5

react-localstorage

Simple componentized localstorage implementation for Facebook's React.
JavaScript
288
star
6

JSXHint

Wrapper around JSHint for linting JSX files. 100% compatible with existing tools using JSHint.
JavaScript
274
star
7

securesha.re-client

Client-side files for Securesha.re, a simple end-to-end encrypted file sharing website.
JavaScript
107
star
8

Healthcare.gov-Marketplace

Community-driven fixes to healthcare.gov's unstable marketplace.
JavaScript
85
star
9

json-to-flow

Convert model schemata into Flow types (.js.flow)
JavaScript
64
star
10

mongoose-filter-denormalize

Simple filtering and denormalization for Mongoose.
JavaScript
53
star
11

async-limiter

A minimal library for throttling async concurrency.
JavaScript
30
star
12

react-document-events

Declarative method for binding handlers to document and window - and cleaning them up.
JavaScript
25
star
13

Imgur-to-Gfycat

Chrome extension that replaces gifs hosted by imgur to HTML5-optimized video converted and hosted by gfycat.
JavaScript
23
star
14

init

Configs
Lua
22
star
15

wayback-machine-machine

Teleport your browser back in time.
JavaScript
18
star
16

babel-preset-es2015-maybe-webpack

JavaScript
13
star
17

backbone.routeNotFound

Simple plugin that fires an event to let the application know that no routes matched, so you can fire a custom 404 handler.
JavaScript
11
star
18

backbone.queryRouter

Drop-in Backbone.Router replacement with support for listening to query parameters.
JavaScript
9
star
19

react-addons

Simple packaging of react addons to avoid fiddly 'react/addons' npm module.
JavaScript
8
star
20

jquery.scrollingShadows

A simple jQuery plugin that creates a shadow on the edge of a scrolling box, indicating that there is more content below.
JavaScript
8
star
21

presentations

JavaScript
8
star
22

forward-emitter

Forward events from any Node EventEmitter to another EventEmitter.
JavaScript
6
star
23

bootstrap-components

Web Components for Bootstrap.
4
star
24

fluxxor-autobind

AutoBind plugin for Fluxxor to help prevent spaghetti props wiring.
JavaScript
4
star
25

js-slack-bot

REPL in Slack.
JavaScript
4
star
26

wheresMyMoneyCampBX

CampBX Auto-Withdrawal Script. Tries to recover your coins.
Python
3
star
27

bitmex-blockclock

Push BitMEX prices to your Blockclock
JavaScript
3
star
28

healthcare.gov

JavaScript
2
star
29

strml.github.com

JavaScript
1
star
30

yarn-link-bug

Reproduction of a yarn --link-duplicates bug
1
star
31

flux-connect

A Redux-style @connect decorator for any Flux app, with proper Flow typing.
JavaScript
1
star
32

openbazaar-ui

CSS
1
star
33

bitmex-DTC

DTC to BitMEX API adapter
OCaml
1
star
34

parse-stream

Parse streams of binary data of arbitrary lengths, handling broken/incomplete chunks.
JavaScript
1
star