Skip to content

devgru/redux-tween

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Redux Tween

Tween store state.

Library is experimental and may not meet your expectations.

If you need a simple way to animate several parameters in React-based elements try Jeremy Stucki's approach using well-known React Motion library.

Counter Demo

Redux Tween provides a way to change state in Redux store smoothly, interpolating states in between.

To achieve this Redux Tween either enhances store or wraps some of action creators and reducers (i.e. some of your ducks).

How it works

Redux Tween uses wrapped reducer to calculate next state. Instead of immediately applying new state, Redux Tween launches transition to push interpolated states on every frame.

Redux Tween uses d3-transition to start and interrupt transitions. Redux Tween allows running one transition per reducer, interrupting previous transition if necessary.

Redux Tween uses d3-interpolate which allows interpolating between numbers, strings, colors, dates. Most importantly, it supports objects and arrays interpolation so you can interpolate custom nested data structures (even the store itself).

Installing

$ yarn add redux-tween
# or
$ npm install --save redux-tween

Integration and usage

  • Basic, store-based integration.
  • Advanced, per-reducer integration.

API Reference

Is here.

Running examples

$ cd examples/store
$ # or
$ cd examples/action-and-reducer
$ yarn
$ yarn start

TODO

  • Add basic/advanced integrations comparison;
  • More tests;
  • Better examples;
  • Improve examples and dependencies organization (300 MiB is too much);
  • Check for corner cases;
  • Rewrite in TS.

Development

Your input is highly appreciated.

This library is experimental, bug reports and PRs are welcome. I'd be happy to help you integrating Redux Tween into other software.

To modify library, follow these steps:

  • Install dependencies: yarn;
  • Develop;
  • Run tests: yarn test;
  • Build yarn build.

License

MIT Β© Dmitriy Semyushkin

About

Tween Redux store state πŸ•›πŸ•‘πŸ•“πŸ••πŸ•—πŸ•™πŸ•›

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published