{"_id":"react-scroll-to-component","_rev":"8-e89132d341a90e437644a690323e5157","name":"react-scroll-to-component","description":"smooth scrolling to react component via reference","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"react-scroll-to-component","version":"1.0.0","description":"smooth scrolling to react component via reference","main":"index.js","repository":{"type":"git","url":"git+https://github.com/flyingant/react-scroll-to-component.git"},"dependencies":{"react":"^0.14.0","react-dom":"^0.14.0","scroll-to":"0.0.2"},"keywords":["react","component","scroll","scroll-to","scroll-to-component","scroll-to-position","scroll-to-element"],"author":{"name":"FlyingAnt","email":"liucheng@lyingant.me"},"license":"ISC","bugs":{"url":"https://github.com/flyingant/react-scroll-to-component/issues"},"homepage":"https://github.com/flyingant/react-scroll-to-component#readme","gitHead":"d07762b1009bda1c9825a958b082b4eb0aef80ef","_id":"react-scroll-to-component@1.0.0","scripts":{},"_shasum":"38e6536e64f2fe1ea5b2635816d5aac89af7fc21","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.5.0","_npmUser":{"name":"flyingant","email":"liucheng@flyingant.me"},"dist":{"shasum":"38e6536e64f2fe1ea5b2635816d5aac89af7fc21","tarball":"https://registry.npmjs.org/react-scroll-to-component/-/react-scroll-to-component-1.0.0.tgz","integrity":"sha512-QQnD2/6t5bypSqw341/FJf2eoqA0/41DUj04nuzDb2SwMP0gMTZddqpL7AWFkGS+Jqqt6WKK4TUWz6TPR2SVoQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPEt845j9/7z8qg9CRddxENaU1MJF9MlhJ1aRXL3BUGQIhAOHvK3qoNMltG0mAKuhK98CKkhyjh+cbmSR7FQ82LoQ3"}]},"maintainers":[{"name":"flyingant","email":"liucheng@flyingant.me"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/react-scroll-to-component-1.0.0.tgz_1477894537792_0.1362086154986173"},"directories":{}},"1.0.1":{"name":"react-scroll-to-component","version":"1.0.1","description":"smooth scrolling to react component via reference","main":"index.js","repository":{"type":"git","url":"git+https://github.com/flyingant/react-scroll-to-component.git"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0","react-dom":"^0.14.0 || ^15.0.0"},"dependencies":{"scroll-to":"0.0.2"},"keywords":["react","component","scroll","scroll-to","scroll-to-component","scroll-to-position","scroll-to-element"],"author":{"name":"FlyingAnt","email":"liucheng@lyingant.me"},"license":"ISC","bugs":{"url":"https://github.com/flyingant/react-scroll-to-component/issues"},"homepage":"https://github.com/flyingant/react-scroll-to-component#readme","gitHead":"84b1fd30c01086babfc7fbf8866b53b34114ab2c","_id":"react-scroll-to-component@1.0.1","scripts":{},"_shasum":"d4d4ead98574eea83f758e3fe35d8cf6c2dff036","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.5.0","_npmUser":{"name":"flyingant","email":"liucheng@flyingant.me"},"dist":{"shasum":"d4d4ead98574eea83f758e3fe35d8cf6c2dff036","tarball":"https://registry.npmjs.org/react-scroll-to-component/-/react-scroll-to-component-1.0.1.tgz","integrity":"sha512-X7eSgzUZO+I1FT/wAk1GczNLT2pnXehK941OXQCzjrgKlfOREqPR0F3JQbi3UHfxOqwzD9Fl2wgZ0bBDBVO7cw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICp7azuZWdFUINm2+LaaaHtd0ST3QNBDIZT0AdyVfM0JAiEAoRy9dtcxb306DTqVK5F8E6OTyyG7rxBRJDp7LLWV8f4="}]},"maintainers":[{"name":"flyingant","email":"liucheng@flyingant.me"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-scroll-to-component-1.0.1.tgz_1489131267135_0.38555356301367283"},"directories":{}},"1.0.2":{"name":"react-scroll-to-component","version":"1.0.2","description":"smooth scrolling to react component via reference","main":"index.js","repository":{"type":"git","url":"git+https://github.com/flyingant/react-scroll-to-component.git"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0","react-dom":"^0.14.0 || ^15.0.0 || ^16.0.0"},"dependencies":{"scroll-to":"0.0.2"},"keywords":["react","component","scroll","scroll-to","scroll-to-component","scroll-to-position","scroll-to-element"],"author":{"name":"FlyingAnt","email":"liucheng@lyingant.me"},"license":"ISC","bugs":{"url":"https://github.com/flyingant/react-scroll-to-component/issues"},"homepage":"https://github.com/flyingant/react-scroll-to-component#readme","gitHead":"1d11ffa525dec9ade68a3f4b52612ed4a17716af","_id":"react-scroll-to-component@1.0.2","scripts":{},"_shasum":"f260dc936c62a53e772786d7832fe0884e195354","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.5.0","_npmUser":{"name":"flyingant","email":"liucheng@flyingant.me"},"dist":{"shasum":"f260dc936c62a53e772786d7832fe0884e195354","tarball":"https://registry.npmjs.org/react-scroll-to-component/-/react-scroll-to-component-1.0.2.tgz","integrity":"sha512-KPvTGta2E5hVnjt5aB37EIPep36ya95Juw0tC9Dc14Czu5C37qWIUYkjS+7ni0IQcEhq+0FncHtwtPxeZZQ5Bg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIATqVdmw8H4WcGAPLnZUyami/b2y/MfAHsyPzWIgOpSeAiAQJnKGtzqT0ll511T1rk4G2umH3gbO9iSBoe7jTEL9Lw=="}]},"maintainers":[{"name":"flyingant","email":"liucheng@flyingant.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scroll-to-component-1.0.2.tgz_1511414040483_0.530214817263186"},"directories":{}}},"readme":"# react-scroll-to-component\nSmooth srolls to react component via reference\n\n## Install\n\n#### With npm\n\n```sh\n  npm install react-scroll-to-component --save\n```\n\n#### With Yarn\n\n\n```sh\n  yarn add react-scroll-to-component\n```\n\n## `scrollToComponent(ref, <options>)`\n\n##### Valid options:\n\n>\n###### offset : *number* \n> Add an offset to the final position. if > 0 then page is moved to the bottom otherwise the page is moved to the top.\n###### align : *string*\n> Alignment of the element. Can be one of `'top'`, `'middle'` or `'bottom'`. Defaulting to `'middle'`.\n###### ease : *string*\n> Easing function defaulting to \"out-circ\" (view [ease](https://github.com/component/ease) for more)\n###### duration : *number*\n> Animation duration defaulting to `1000`\n\n## Example\n```js\nimport scrollToComponent from 'react-scroll-to-component';\n\n// without options\nscrollToComponent(this.refs.name);\n\n//with options\nscrollToComponent(this.refs.name, {\n\toffset: 1000,\n\talign: 'top',\n\tduration: 1500\n});\n```\n## [Demo](https://flyingant.github.io/react-scroll-to-component/)\n\n```js\nimport React, { Component } from 'react';\nimport './App.css';\nimport scrollToComponent from 'react-scroll-to-component';\n\nclass App extends React.Component {\n\n  componentDidMount() {\n    scrollToComponent(this.Blue, { offset: 0, align: 'middle', duration: 500, ease:'inCirc'});\n  }\n\n  render() {\n    return (\n      <div className='main'>\n        <div className='button_group'>\n          <button onClick={() => scrollToComponent(this.Violet, { offset: 0, align: 'top', duration: 1500})}>Go To Violet</button>\n          <button onClick={() => scrollToComponent(this.Indigo, { offset: 0, align: 'bottom', duration: 500, ease:'inExpo'})}>Go To Indigo</button>\n          <button onClick={() => scrollToComponent(this.Blue, { offset: -200, align: 'middle', duration: 1500, ease:'inCirc'})}>Go To Blue</button>\n          <button onClick={() => scrollToComponent(this.Green, { offset: 0, align: 'middle', duration: 500, ease:'inExpo'})}>Go To Green</button>\n          <button onClick={() => scrollToComponent(this.Yellow, { offset: 0, align: 'top', duration: 1500, ease:'inCirc'})}>Go To Yellow</button>\n          <button onClick={() => scrollToComponent(this.Orange, { offset: 0, align: 'top', duration: 500, ease:'inCirc'})}>Go To Orange</button>\n          <button onClick={() => scrollToComponent(this.Red, { offset: 0, align: 'top', duration: 500})}>Go To Red</button>\n        </div>\n        <section className='violet' ref={(section) => { this.Violet = section; }}>Violet</section>\n        <section className='indigo' ref={(section) => { this.Indigo = section; }}>Indigo</section>\n        <section className='blue' ref={(section) => { this.Blue = section; }}>Blue</section>\n        <section className='green' ref={(section) => { this.Green = section; }}>Green</section>\n        <section className='yellow' ref={(section) => { this.Yellow = section; }}>Yellow</section>\n        <section className='orange' ref={(section) => { this.Orange = section; }}>Orange</section>\n        <section className='red' ref={(section) => { this.Red = section; }}>Red</section>\n        <b>Inspired By <a href=\"https://hopechen1028.github.io/hopechen.me/\" target=\"_blank\">Hope</a> with Love and Peace</b>\n      </div>\n    )\n  }\n}\n\nexport default App;\n```\n\n\n# License\n\nMIT\n\n","maintainers":[{"name":"flyingant","email":"liucheng@flyingant.me"}],"time":{"modified":"2022-06-26T08:06:59.265Z","created":"2016-10-31T06:15:39.698Z","1.0.0":"2016-10-31T06:15:39.698Z","1.0.1":"2017-03-10T07:34:27.364Z","1.0.2":"2017-11-23T05:14:00.777Z"},"homepage":"https://github.com/flyingant/react-scroll-to-component#readme","keywords":["react","component","scroll","scroll-to","scroll-to-component","scroll-to-position","scroll-to-element"],"repository":{"type":"git","url":"git+https://github.com/flyingant/react-scroll-to-component.git"},"author":{"name":"FlyingAnt","email":"liucheng@lyingant.me"},"bugs":{"url":"https://github.com/flyingant/react-scroll-to-component/issues"},"license":"ISC","readmeFilename":"README.md","users":{"flyingant":true,"isenricho":true,"bonashen":true}}