Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sleexyz/react-set-state-tween
Tweening drop-in replacement for React's setState
https://github.com/sleexyz/react-set-state-tween
Last synced: 1 day ago
JSON representation
Tweening drop-in replacement for React's setState
- Host: GitHub
- URL: https://github.com/sleexyz/react-set-state-tween
- Owner: sleexyz
- Created: 2015-06-09T21:54:32.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-06-10T00:41:47.000Z (over 9 years ago)
- Last Synced: 2024-04-14T11:22:42.567Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 148 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-set-state-tween
Tweening drop-in replacement for React's `setState`, via [react-tween-state](https://github.com/chenglou/react-tween-state) and [bluebird promises](https://github.com/petkaantonov/bluebird).
#### *composable*
`this.setStateTween` returns a [bluebird](https://github.com/petkaantonov/bluebird) promise that resolves at the end of the tween.
This allows you to chain/parallelize multiple animations/actions as you would with any Promise with the [bluebird API](https://github.com/petkaantonov/bluebird/blob/master/API.md).
#### *seamlessly replaces React's* `setState`
Compare this...
```javascript
this.setStateTween({
key1: value1,
key2: value2
});
```
with this...
```javascript
this.setState({
key1: value1,
key2: value2
});
```
## install
```
npm install --save react-set-state-tween
npm install --save bluebird
```
## Usage
#### Basic:
```javascript
this.setStateTween({a: 1});
```
#### Tween multiple values simultaneously:
```javascript
this.setStateTween({
a: 1,
b: 1,
});
```
#### Specify options supported by `react-tween-state`:
```javascript
this.setStateTween({a: 1}, {
duration: 500,
easing: tweenState.easingTypes.easeInOutQuad
});
```
`setStateTween` will ignore `onEnd` and `endValue` options.
#### Chain animations (and nonanimations!):
```javascript
this.setStateTween({
a: 1,
b: 1,
}).then(function() {
console.log("finished!");
console.log("jk lol...");
}).then(() => this.setStateTween({
a: 0,
b: 0,
})).then(function() {
console.log("actually finished.");
});
```
#### Note: Promise will resolve immediately if tween is degenerate:
```javascript
// this expression will resolve in only 500 ms...
this.setStateTween( {a: 1}, {duration: 500} )
then(() => setStateTween( {a: 1}, {duration: 1000} ));
//...because there's no effect tweening from 1 to 1
```
#### Don't just chain animations, orchestrate them!:
Check out the [bluebird API](https://github.com/petkaantonov/bluebird/blob/master/API.md) for more Promise sugar.
```javascript
// Promise.all resolves when all resolve. (parallel)
Promise.all([
function() {
// Promise.each waits until next one resolves. (sequential)
return Promise.each([
() => this.setStateTween( {a: 1} ),
() => this.setStateTween( {a: 0} ),
() => this.setStateTween( {a: 1} ),
() => this.setStateTween( {a: 0} )
])
},
function() {
return Promise.each([
() => this.setStateTween( {b: 1}, {duration: 1000}),
() => this.setStateTween( {b: 0}, {duration: 1000}),
() => this.setStateTween( {b: 1}, {duration: 1000}),
() => this.setStateTween( {b: 0}, {duration: 1000})
])
},
]).then(() => this.tweenStateTo({
a: 1,
b: 1
}));
```
### Don't like promises?
Then you can use callbacks.
```javascript
this.setStateTween( {a: 1}, {duration: 1000}, function() {
console.log("finished");
});
/*
// Compare to
this.setState( {a: 1}, function() {
console.log("finished");
});
*/
```
## example
```javascript
import React from "react"
import Promise from "bluebird"
import tweenState from "react-tween-state"
import SetStateTweenMixin from "react-set-state-tween"
const App = React.createClass({
mixins: [SetStateTweenMixin],
getInitialState: function() {
return {
A: 1,
B: 1,
C: 1
};
},
onClick: function() {
// resolve each promise sequentially...
Promise.each([
() => this.setStateTween({A: 0}),
() => this.setStateTween({B: 0}),
() => this.setStateTween({C: 0}),
]).then(function() {
// and then in parallel!
return Promise.all([
() => this.setStateTween({A: 1}),
() => this.setStateTween({B: 1}),
() => this.setStateTween({C: 1}),
]);
})
},
render: function() {
let styleA = { opacity: this.getTweeningValue("A") };
let styleB = { opacity: this.getTweeningValue("B") };
let styleC = { opacity: this.getTweeningValue("C") };
return (
A
B
C
Click me!
)
}
})
```