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 versionnpm run compile
to compile a dist versionnpm run clean
to clean dist directorynpm run coverage:report
to view code coverage report on port9002
npm run dev
to start a dev server with storybook environment on port9001
npm run lint
to lint both js and stylesnpm run lint:js
to pass esLint over the codenpm run lint:js:fix
to correct fixable js lint errorsnpm run lint:css
to pass stylelint over the codenpm run lint:css:fix
to correct fixable style lint errors - using stylefmtnpm run test
for a single pass of testsnpm 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
- 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