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:

• https://github.com/producthunt/chai-enzyme
• https://github.com/domenic/sinon-chai

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

• Make sure your IDE supports .editorconfig

Previous work

Shoutout and thanks to:

• @arunoda for
  • react-storybook
  • react-storybook-simple-demo
  • Being source of inspiration on how to develop react components in isolation