initial commit

Author: icd2k3

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "modules": false
+      }
+    ],
+    "stage-2"
+  ]
+}

.gitignore

@@ -0,0 +1,6 @@
+/node_modules
+/dist/*
+/yarn-error.log
+/coverage
+*.sublime-project
+*.sublime-workspace

README.md

@@ -1,2 +1,46 @@
-# react-scroll-into-view-if-needed
-A thin react component wrapper around scroll-into-view-if-needed
+<h3 align="center">
+  React Scroll Into View If Needed
+</h3>
+
+## Description
+
+Just a thin component wrapper around the fantastic [scroll-into-view-if-needed](https://www.npmjs.com/package/scroll-into-view-if-needed) polyfill.
+
+## Install
+
+`yarn add react-scroll-into-view-if-needed`
+
+or
+
+`npm install react-scroll-into-view-if-needed --save`
+
+## Example
+
+```js
+import ScrollIntoViewIfNeeded from 'react-scroll-into-view-if-needed';
+
+const MyComponent = () => (
+  <div style={{ paddingTop: 2000 }}>
+    <ScrollIntoViewIfNeeded>
+      <div>Hello</div>
+    </ScrollIntoViewIfNeeded>
+  </div>
+);
+```
+
+## Props
+
+#### active
+> Default: `true`
+
+The `active` prop allows controll of _when_ to scroll to the component. By default, it will attempt to scroll as soon as it is mounted, but you can set this prop to manually control when to trigger the scroll behavior.
+
+#### elementType
+> Default: `'div'`
+
+Set the wrapper component type. See the React [createElement](https://reactjs.org/docs/react-api.html#createelement) api
+
+#### options
+> Default: `{ duration: 250, easing: 'easeOut' }`
+
+The `options` prop simply passes options to `scroll-into-view-if-needed`. See all the possible options in their [API documentation](https://www.npmjs.com/package/scroll-into-view-if-needed#api)

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-scroll-into-view-if-needed",
+  "version": "1.0.0",
+  "description": "A thin component wrapper around scroll-into-view-if-needed",
+  "main": "dist/umd/index.js",
+  "module": "dist/es/index.js",
+  "repository": "[email protected]:icd2k3/react-scroll-into-view-if-needed.git",
+  "author": "JUSTIN SCHRADER <[email protected]>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.3.0"
+  },
+  "dependencies": {
+    "scroll-into-view-if-needed": "^1.5.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.3",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "prop-types": "^15.6.1",
+    "react": "^16.3.2",
+    "rollup": "^0.58.0",
+    "rollup-plugin-babel": "^3.0.3",
+    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup-plugin-node-resolve": "^3.3.0"
+  },
+  "scripts": {
+    "prepublishOnly": "yarn build",
+    "build": "rollup -c"
+  }
+}

rollup.config.js

@@ -0,0 +1,47 @@
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import resolve from 'rollup-plugin-node-resolve';
+
+const pkg = require('./package.json');
+
+const external = Object.keys(pkg.peerDependencies);
+
+const globals = {
+  react: 'React',
+};
+
+const config = {
+  input: 'src/index.js',
+  plugins: [
+    babel({
+      exclude: 'node_modules/**',
+      plugins: ['external-helpers'],
+    }),
+    resolve({
+      module: true,
+      jsnext: true,
+      main: true,
+    }),
+    commonjs(),
+  ],
+  external,
+  output: [
+    {
+      exports: 'named',
+      file: pkg.main,
+      format: 'umd',
+      globals,
+      name: 'react-scroll-into-view-if-needed',
+      sourcemap: true,
+    },
+    {
+      exports: 'named',
+      file: pkg.module,
+      format: 'es',
+      globals,
+      sourcemap: true,
+    },
+  ],
+};
+
+export default config;

src/index.js

@@ -0,0 +1,67 @@
+import { createElement, createRef, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
+
+export default class ScrollIntoViewIfNeeded extends PureComponent {
+  static propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node.isRequired,
+    elementType: PropTypes.string,
+    options: PropTypes.shape({
+      boundary: PropTypes.node,
+      centerIfNeeded: PropTypes.bool,
+      duration: PropTypes.number,
+      easing: PropTypes.oneOf([
+        'ease',
+        'easeIn',
+        'easeOut',
+        'easeInOut',
+        'linear',
+      ]),
+      offset: PropTypes.shape(),
+      top: PropTypes.number,
+      right: PropTypes.number,
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+    }),
+  };
+
+  static defaultProps = {
+    active: true,
+    elementType: 'div',
+    options: {
+      duration: 250,
+      easing: 'easeOut',
+    },
+  };
+
+  constructor(props) {
+    super(props);
+    this.node = createRef();
+  }
+
+  componentDidMount() {
+    const { active } = this.props;
+    if (active) {
+      this.handleScrollIntoViewIfNeeded();
+    }
+  }
+
+  componentDidUpdate({ active }) {
+    const { active: isNowActive } = this.props;
+    if (!active && isNowActive) {
+      this.handleScrollIntoViewIfNeeded();
+    }
+  }
+
+  handleScrollIntoViewIfNeeded = () => {
+    const { options } = this.props;
+    const { current: node } = this.node;
+    scrollIntoViewIfNeeded(node, options);
+  };
+
+  render() {
+    const { elementType, children } = this.props;
+    return createElement(elementType, { ref: this.node, ...this.props }, children);
+  }
+}