Simple viewstack with support for animated transitions. Alternative to ReactCSSTransitionGroup with better control over in/out animation direction and transitions effects out of the box.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.storybook
src
stories
tests
.babelrc
.bithoundrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
.stylelintrc
LICENSE
README.md
circle.yml
karma.config.js
package.json
webpack.config.base.js
webpack.config.production.js

README.md

CircleCI branch bitHound Code bitHound Dependencies

React ViewStack

Simple viewstack with support for animated transitions. Alternative to ReactCSSTransitionGroup with better control over in/out animation direction and transition effects out of the box. Like a (much) simpler version of FullPage.js written in react.

Usage

For development

Checkout, install npm dependencies, then you have available scripts:

  • npm run build to build (clean+lint+test+compile) a dist version
  • npm run compile to compile a dist version
  • npm run clean to clean dist directory
  • npm run coverage:report to view code coverage report on port 9002
  • npm run dev to start a dev server with storybook environment on port 9001
  • npm run lint to lint both js and styles
  • npm run lint:js to pass esLint over the code
  • npm run lint:js:fix to correct fixable js lint errors
  • npm run lint:css to pass stylelint over the code
  • npm run lint:css:fix to correct fixable style lint errors - using stylefmt
  • npm run test for a single pass of tests
  • npm run test:watch for a continous test mode

For consumption

  • Todo

Library format

Conforming to CommonJS format

Handy urls

Testing APIs in use:

Todo

  • Describe usage
  • Add esLint
  • Add stylelint
  • Fix lint errors
  • Add tests
  • Dedupe webpack configs for prod/tests/storybook
  • Better tests
  • Better coverage
  • Use extract-text-plugin to provide separate stylesheet
  • Use css modules to prevent global scope pollution
  • Use animation events as detailed here
  • Add more transition effects
  • Better visualisation in storybook
  • Better readme
  • Publish on NPM
  • Promote

Contributing

Previous work

Shoutout and thanks to: