{"id":13394769,"url":"https://github.com/google-fabric/velocity-react","last_synced_at":"2025-03-13T20:31:41.550Z","repository":{"id":51109222,"uuid":"41380308","full_name":"google-fabric/velocity-react","owner":"google-fabric","description":"React components for Velocity.js","archived":true,"fork":false,"pushed_at":"2019-05-09T17:07:50.000Z","size":592,"stargazers_count":2932,"open_issues_count":16,"forks_count":161,"subscribers_count":59,"default_branch":"master","last_synced_at":"2025-03-08T23:03:54.388Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/google-fabric.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-25T18:19:55.000Z","updated_at":"2025-03-03T19:45:21.000Z","dependencies_parsed_at":"2022-09-04T05:00:44.213Z","dependency_job_id":null,"html_url":"https://github.com/google-fabric/velocity-react","commit_stats":null,"previous_names":["twitter-fabric/velocity-react"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-fabric%2Fvelocity-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-fabric%2Fvelocity-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-fabric%2Fvelocity-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-fabric%2Fvelocity-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/google-fabric","download_url":"https://codeload.github.com/google-fabric/velocity-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243478194,"owners_count":20297210,"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-07-30T17:01:30.943Z","updated_at":"2025-03-13T20:31:41.130Z","avatar_url":"https://github.com/google-fabric.png","language":"JavaScript","readme":"# velocity-react\n\n[React](http://facebook.github.io/react/) components for interacting with the\n[Velocity](http://velocityjs.org/) DOM animation library.\n\nRead our [announcement blog post](https://fabric.io/blog/introducing-the-velocityreact-library) for\ndetails about why and how we built this.\n\nSee the [live demo](http://google-fabric.github.io/velocity-react/).\n\n**Latest version:** v1.4.2 Avoids react-dom warnings in test for `Transition` props.\n\n*Note: v1.1.0 and later require React 0.14.x*\n*Note: v1.3.0 and later require React 15.3.x and should work with React 16*\n\n## Running the demo\n\n```\n$ git clone https://github.com/twitter-fabric/velocity-react.git\n$ cd velocity-react\n$ npm install\n$ npm run demo\n```\n\nVisit \u003chttp://localhost:8080/webpack-dev-server/\u003e in your browser. Hot reloading is enabled, if you\nwant to tweak the code in main.jsx.\n\n## Installation\n\nThe velocity-react library is provided as an [NPM package](https://www.npmjs.com/package/velocity-react):\n\n```\n$ npm install --save velocity-react\n```\n\nThe `VelocityComponent` and `VelocityTransitionGroup` components, as well as the `velocityHelpers`\nutilities, are distributed as ES5-compatible JavaScript files with [CommonJS](http://www.commonjs.org/)\n`require` statements. You will need a dependency tool such as [Browserify](http://browserify.org/),\n[RequireJS](http://requirejs.org/), or [webpack](https://webpack.github.io/) to use them on the web.\n\nThis package depends directly on Velocity, as well as [lodash](https://lodash.com/) for a handful\nof utility functions (which are required individually to try and keep bundle size down).\n\nTo use the Velocity UI Pack, which includes a library of transitions and support for the `stagger`,\n`drag`, and `backwards` options, require it along with Velocity at an entry point to your app:\n```JS\n  require('velocity-animate');\n  require('velocity-animate/velocity.ui');\n```\n\n**Note**: Depending upon where your version of NPM places dependencies, you may need to explicitly\nrequire `velocity-animate` in your package.json to be able to require `velocity-animate/velocity.ui`.\n\nIt is assumed that your application already depends on `react` and `react-dom` at v15. If you're\nstill at React 0.13, use v1.0.1 of this package. Other than dependencies, it is the same as v1.1.0.\n\n## Usage\n\n### `VelocityComponent`\n\nComponent to add Velocity animations to a child node or one or more of its descendants. Wraps a single\nchild without adding additional DOM nodes.\n\n#### Example\n```JSX\n  \u003cVelocityComponent animation={{ opacity: this.state.showSubComponent ? 1 : 0 }} duration={500}\u003e\n    \u003cMySubComponent/\u003e\n  \u003c/VelocityComponent\u003e\n```\n\n#### Details\n\nThe API attempts to be as declarative as possible. A single `animation` property declares what\nanimation the child should have. If that property changes, this component applies the new animation\nto the child on the next tick.\n\nBy default, the animation is not run when the component is mounted. Instead, Velocity's `finish`\ncommand is used to jump to the animation's end state. For a component that animates out of and\nback in to a default state, this allows the parent to specify the \"animate into\" animation as\nthe default, and therefore not have to distinguish between the initial state and the state to\nreturn to after animating away.\n\n#### Properties\n\n`animation`: Either an animation key or hash defining the animation. See Velocity's documentation\n  for what this can be. (It is passed to Velocity exactly.)\n\n`runOnMount`: If true, runs the animation even when the component is first mounted.\n\n`targetQuerySelector`: By default, this component's single child is animated. If `targetQuerySelector`\n  is provided, it is used to select descendants to apply the animation to. Use with caution, only\n  when you're confident that React's reconciliation will preserve these nodes during animation.\n  Also note `querySelectorAll`'s [silly behavior](http://ejohn.org/blog/thoughts-on-queryselectorall/) w.r.t. pruning results when being called on a node.\n  A special value of \"children\" will use the direct children of the node, since there isn't a\n  great way to specify that to `querySelectorAll`.\n\n`interruptBehavior`: Specifies what should happen to an in-progress animation if the `animation`\n  property changes. By default is `stop`, which stops it at its current position, letting the new\n  animation use that as a starting point. This generally gives the smoothest results. Other options\n  are `finish`, which jumps the animation to its end state, and `queue`, which will proceed with\n  the new animation only after the old one has finished. These options may be necessary to avoid\n  bad behavior when certain built-in effects like \"slideUp\" and \"slideDown\" are toggled rapidly.\n\nUnrecognized properties are passed as options to Velocity (e.g. `duration`, `delay`, `loop`).\n\n#### Methods\n\n`runAnimation`: Triggers the animation immediately. Useful for when you want an animation that\n  corresponds to an event but not a particular model state change (e.g. a \"bump\" when a click\n  occurs).\n\n\n### `VelocityTransitionGroup`\n\nComponent to add Velocity animations around React transitions. Delegates to the React `TransitionGroup`\naddon.\n\n#### Example\n```JSX\n  \u003cVelocityTransitionGroup enter={{animation: \"slideDown\"}} leave={{animation: \"slideUp\"}}\u003e\n    {this.state.renderSubComponent ? \u003cMySubComponent/\u003e : undefined}\n  \u003c/VelocityTransitionGroup\u003e\n```\n\n#### Properties\n`enter`: Animation to run on a child component being added\n\n`leave`: Animation to run on a child component leaving\n\n`runOnMount`: if true, runs the `enter` animation on the elements that exist as children when this\n  component is mounted.\n\nAny additional properties (e.g. `className`, `component`) will be passed to the internal\n`TransitionGroup`.\n\n`enter` and `leave` should either be a string naming an animation registered with UI Pack, or a hash\nwith an `animation` key that can either be a string itself, or a hash of style attributes to animate\n(this value is passed to Velocity its the first arg).\n\n**Note:** To make it easier to write consistent “enter” animations, the “leave” animation is applied\nto elements before the “enter” animation is run. So, for something like opacity, you can set it at\n0 in “leave” and 1 in “enter,” rather than having to specify that “enter” should start at 0.\n\nIf `enter` or `leave` is a hash, it can additionally have a `style` value that is applied the tick\nbefore the Velocity animation starts. Use this for non-animating properties (like `position`) that\nare prerequisites for correct animation. The style value is applied using Velocity's JS -\u003e CSS\nroutines, which may differ from React's.\n\nAny hash entries beyond `animation` and `style` are passed in an options hash to Velocity. Use this\nfor options like `stagger`, `reverse`, *\u0026c.*\n\n#### Statics\n\n`disabledForTest`: Set this to true globally to turn off all custom animation logic. Instead, this\n  component will behave like a vanilla `TransitionGroup`.\n\n### `velocityHelpers`\n\n#### `registerEffect`\n\nTakes a Velocity \"UI pack effect\" definition and registers it with a unique key, returning that\nkey (to later pass as a value for the `animation` property). Takes an optional `suffix`, which can\nbe \"In\" or \"Out\" to modify UI Pack's behavior.\n\nUnlike what you get from passing a style hash to `VelocityComponent`'s `animation` property,\nVelocity \"UI pack effects\" can have chained animation calls and specify a `defaultDuration`, and\nalso can take advantage of `stagger` and `reverse` properties on the `VelocityComponent`.\n\nYou will need to manually register the UI Pack with the global Velocity in your application with:\n```JS\n  require('velocity-animate');\n  require('velocity-animate/velocity.ui');\n```\n\nIf, even with the above statements, you see errors like `Velocity: First argument\n(transition.shrinkIn) was not a property map, a known action, or a registered redirect. Aborting.`\nit is likely that there are 2 copies of `velocity-animate` in your `node_modules`. Use `npm dedupe`\nto collapse them down to one.\n\nIt might also be necessary to require the `velocity-animate` package explicitly in your package.json.\n\nSee: http://velocityjs.org/#uiPack\n\n### Server-side rendering\n\nThe `VelocityComponent` and `VelocityTransitionGroup` components are (as of v1.0.1)\ntolerant of being rendered on the server: they will no-op and render their children\nnaturally. If your initial animation end states match\nnatural rendering this will be exactly what you want. Otherwise, you may notice a\nflash when the JS is applied and the initial animations are resolved.\n\n## Bugs\nPlease report any bugs to: \u003chttps://github.com/twitter-fabric/velocity-react/issues\u003e\n\n**We welcome contributions!** Note that when testing local changes against local projects you’ll\nneed to avoid `npm link` since it typically will cause duplicate instances of `React` in the client.\n(You’ll often see this manifest as `firstChild undefined` errors.)\n\n## Acknowledgments\nThanks to Julian Shapiro and Ken Wheeler for creating and maintaining Velocity, respectively,\nand for working with us to release this library.\n\nThanks to Kevin Robinson and Sam Phillips for all of the discussions and code reviews.\n\n## License\nCopyright 2017 Google Inc.\n\nLicensed under the MIT License: https://opensource.org/licenses/MIT\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle-fabric%2Fvelocity-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogle-fabric%2Fvelocity-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle-fabric%2Fvelocity-react/lists"}