{"id":18465233,"url":"https://github.com/sleexyz/react-set-state-tween","last_synced_at":"2025-04-30T22:16:22.442Z","repository":{"id":33514721,"uuid":"37160714","full_name":"sleexyz/react-set-state-tween","owner":"sleexyz","description":"Tweening drop-in replacement for React's setState","archived":false,"fork":false,"pushed_at":"2015-06-10T00:41:47.000Z","size":152,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-16T17:39:14.542Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sleexyz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-09T21:54:32.000Z","updated_at":"2015-08-30T05:08:07.000Z","dependencies_parsed_at":"2022-09-12T21:52:36.912Z","dependency_job_id":null,"html_url":"https://github.com/sleexyz/react-set-state-tween","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sleexyz%2Freact-set-state-tween","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sleexyz%2Freact-set-state-tween/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sleexyz%2Freact-set-state-tween/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sleexyz%2Freact-set-state-tween/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sleexyz","download_url":"https://codeload.github.com/sleexyz/react-set-state-tween/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251582972,"owners_count":21612740,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T09:12:30.461Z","updated_at":"2025-04-29T20:45:45.351Z","avatar_url":"https://github.com/sleexyz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-set-state-tween\n\n\u003c/br\u003e\n\nTweening 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).\n\n\u003c/br\u003e\n\n#### *composable*\n\n`this.setStateTween` returns a [bluebird](https://github.com/petkaantonov/bluebird) promise that resolves at the end of the tween.\n\nThis 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).\n\n\u003c/br\u003e\n\n#### *seamlessly replaces React's* `setState`\n\nCompare this...\n```javascript\nthis.setStateTween({\n    key1: value1,\n    key2: value2\n});\n```\nwith this...\n```javascript\nthis.setState({\n    key1: value1,\n    key2: value2\n});\n```\n\n\n\n\n## install\n```\nnpm install --save react-set-state-tween\nnpm install --save bluebird\n```\n\n## Usage\n\n#### Basic:\n```javascript\nthis.setStateTween({a: 1});\n```\n\n\n#### Tween multiple values simultaneously:\n```javascript\nthis.setStateTween({\n    a: 1,\n    b: 1,\n});\n```\n\n#### Specify options supported by `react-tween-state`:\n```javascript\nthis.setStateTween({a: 1}, {\n    duration: 500,\n    easing: tweenState.easingTypes.easeInOutQuad\n});\n```\n`setStateTween` will ignore `onEnd` and `endValue` options.\n\n\n#### Chain animations (and nonanimations!):\n```javascript\nthis.setStateTween({\n    a: 1,\n    b: 1,\n}).then(function() {\n    console.log(\"finished!\");\n    console.log(\"jk lol...\");\n}).then(() =\u003e this.setStateTween({\n    a: 0,\n    b: 0,\n})).then(function() {\n    console.log(\"actually finished.\");\n});\n```\n\n#### Note: Promise will resolve immediately if tween is degenerate:\n\n```javascript\n// this expression will resolve in only 500 ms...\n\nthis.setStateTween( {a: 1}, {duration: 500} )\n    then(() =\u003e setStateTween( {a: 1}, {duration: 1000} ));\n\n//...because there's no effect tweening from 1 to 1\n```\n\n#### Don't just chain animations, orchestrate them!:\nCheck out the [bluebird API](https://github.com/petkaantonov/bluebird/blob/master/API.md) for more Promise sugar.\n```javascript\n\n// Promise.all resolves when all resolve. (parallel)\nPromise.all([\n    function() {\n\n        // Promise.each waits until next one resolves. (sequential)\n        return Promise.each([\n            () =\u003e this.setStateTween( {a: 1} ),\n            () =\u003e this.setStateTween( {a: 0} ),\n            () =\u003e this.setStateTween( {a: 1} ),\n            () =\u003e this.setStateTween( {a: 0} )\n        ])\n    },\n    function() {\n        return Promise.each([\n            () =\u003e this.setStateTween( {b: 1}, {duration: 1000}),\n            () =\u003e this.setStateTween( {b: 0}, {duration: 1000}),\n            () =\u003e this.setStateTween( {b: 1}, {duration: 1000}),\n            () =\u003e this.setStateTween( {b: 0}, {duration: 1000})\n        ])\n    },\n]).then(() =\u003e this.tweenStateTo({\n    a: 1,\n    b: 1\n}));\n```\n\n### Don't like promises?\n\nThen you can use callbacks.\n\n```javascript\nthis.setStateTween( {a: 1}, {duration: 1000},  function() {\n    console.log(\"finished\");\n});\n\n/*\n// Compare to\n\nthis.setState( {a: 1}, function() {\n    console.log(\"finished\");\n});\n*/\n```\n\n\n\n\n## example\n\n```javascript\nimport React from \"react\"\nimport Promise from \"bluebird\"\nimport tweenState from \"react-tween-state\"\nimport SetStateTweenMixin from \"react-set-state-tween\"\n\nconst App = React.createClass({\n    mixins: [SetStateTweenMixin],\n    getInitialState: function() {\n        return {\n            A: 1,\n            B: 1,\n            C: 1\n        };\n    },\n    onClick: function() {\n\n        // resolve each promise sequentially...\n\n        Promise.each([\n            () =\u003e this.setStateTween({A: 0}),\n            () =\u003e this.setStateTween({B: 0}),\n            () =\u003e this.setStateTween({C: 0}),\n        ]).then(function() {\n\n        // and then in parallel!\n\n            return Promise.all([\n                () =\u003e this.setStateTween({A: 1}),\n                () =\u003e this.setStateTween({B: 1}),\n                () =\u003e this.setStateTween({C: 1}),\n            ]);\n        })\n\n    },\n    render: function() {\n        let styleA = { opacity: this.getTweeningValue(\"A\") };\n        let styleB = { opacity: this.getTweeningValue(\"B\") };\n        let styleC = { opacity: this.getTweeningValue(\"C\") };\n        return (\n            \u003cdiv\u003e\n                \u003cdiv style={styleA} /\u003e A \u003c/div\u003e\n                \u003cdiv style={styleB} /\u003e B \u003c/div\u003e\n                \u003cdiv style={styleC} /\u003e C \u003c/div\u003e\n\n                \u003cdiv onClick={this.onClick}\u003e Click me! \u003c/div\u003e\n            \u003c/div\u003e\n        )\n    }\n})\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsleexyz%2Freact-set-state-tween","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsleexyz%2Freact-set-state-tween","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsleexyz%2Freact-set-state-tween/lists"}