first release

Author: metin_sut

.babelrc

@@ -0,0 +1,6 @@
+{
+   "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+   ]
+}

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,47 @@
+## Basic Height Transition Library for React
+Simple height transition for collapse elements.
+
+## Installation
+This library written with react-hook so you have to install verison of react 16.8.4 or above.
+```sh
+npm i height-transition -S
+```
+
+## Setup
+Just connect your button with its ref and pass to props HeightTransition component.
+```javascript
+import React, { Fragment, useRef } from 'react';
+import HeightTransition from 'height-transition';
+
+const App = () => {
+   const toggleElem = useRef(null);
+     return (
+    <Fragment>
+      <button ref={toggleElem}>Toggle</button>
+      <HeightTransition 
+         styles={styles} 
+         toggle={toggleElem} 
+         animation="ease-out" 
+         time="100ms"
+         >
+        Your Content
+      </HeightTransition>
+    </Fragment>
+  );
+}
+```
+
+## API
+| Api | Description | Default |
+| ------ | ------ | ------ |
+| styles | Set your own style. |
+| toggle | Set your element ref |
+| animation | Set your animation style | default : "ease" |
+| time | Set your animation time | default : "300ms" |
+
+## Live Example
+
+[![Checkout](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/381vprmr15?fontsize=14)
+
+## License
+MIT

dist/heightTransition.js

@@ -0,0 +1,50 @@
+import React, { useState, Fragment, useRef } from 'react';
+import HeightTransition from './HeightTransition';
+
+const App = () => {
+
+  const data = [
+    {
+      name: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, qui!"
+    },
+    {
+      name: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, qui!"
+    }
+  ];
+  const dummy = {
+    name: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, qui!"
+  };
+
+  const [array, setArray] = useState(data);
+
+  const pushData = () => {
+    setArray(state => [...state, dummy]);
+  };
+  const resetData = () => {
+    setArray(data);
+  };
+
+  const styles = {
+    backgroundColor: '#d1d1d1',
+    width: '300px'
+  };
+
+  const toggleElem = useRef(null);
+
+  return (
+    <Fragment>
+      <div>
+        <button ref={toggleElem}>Toggle</button>
+        <button onClick={pushData}>Add Data</button>
+        <button onClick={resetData}>Reset</button>
+      </div>
+      <HeightTransition styles={styles} toggle={toggleElem} animation="ease-out" time="100ms">
+        {array.map((item, key) => (
+          <p key={key}>{item.name}</p>
+        ))}
+      </HeightTransition>
+    </Fragment>
+  );
+}
+
+export default App;

dist/heightTransition.js.map

@@ -0,0 +1,38 @@
+import React, { useRef, useEffect } from "react";
+
+const HeightTransition = props => {
+   const divElem = useRef(null);
+
+   const toggleButton = () => {
+      divElem.current.style.height = divElem.current.scrollHeight + "px";
+      if (divElem.current.clientHeight !== 0) {
+         divElem.current.style.height = "0px";
+      }
+   };
+
+   useEffect(() => {
+      divElem.current.style.height = "auto";
+      divElem.current.style.overflow = "hidden";
+      divElem.current.style.transition = `height ${props.time ? props.time : "300ms"} ${props.animation ? props.animation : "ease"}`;
+      window.addEventListener("transitionend", onTransitionend);
+      props.toggle.current.addEventListener("click", toggleButton);
+      return () => {
+         window.removeEventListener("transitionend", onTransitionend);
+         props.toggle.current.removeEventListener("click", toggleButton);
+      };
+   });
+
+   const onTransitionend = () => {
+      if (divElem.current.clientHeight !== 0) {
+         divElem.current.style.height = "auto";
+      }
+   };
+
+   return (
+      <div style={props.styles} ref={divElem}>
+         {props.children}
+      </div>
+   );
+};
+
+export default HeightTransition;

dist/heightTransition.umd.js

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <title>Document</title>
+</head>
+
+<body>
+   <div id="root"></div>
+   <script src="./index.js"></script>
+</body>
+
+</html>

dist/heightTransition.umd.js.map

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));

dist/heightTransition.umd.m.js

@@ -0,0 +1,39 @@
+{
+  "name": "height-transition",
+  "version": "0.2.0",
+  "description": "Simple height transition for collapse elements.",
+  "main": "./dist/heightTransition.js",
+  "umd:main": "dist/heightTransition.umd.js",
+  "module": "dist/heightTransition.umd.m.js",
+  "files": [
+    "dist"
+  ],
+  "author": "Metin Süt <metindir@gmail.com>",
+  "homepage": "https://github.com/metinsut/height-transition",
+  "keywords": [
+    "react",
+    "hooks",
+    "height",
+    "transition",
+    "height-transition"
+  ],
+  "scripts": {
+    "start": "parcel ./example/index.html --out-dir exampleDist",
+    "build": "microbundle --jsx React.createElement"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.3.4",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.1",
+    "microbundle": "^0.11.0",
+    "parcel-bundler": "^1.12.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  }
+}

dist/heightTransition.umd.m.js.map

@@ -0,0 +1,38 @@
+import React, { useRef, useEffect } from "react";
+
+const HeightTransition = props => {
+   const divElem = useRef(null);
+
+   const toggleButton = () => {
+      divElem.current.style.height = divElem.current.scrollHeight + "px";
+      if (divElem.current.clientHeight !== 0) {
+         divElem.current.style.height = "0px";
+      }
+   };
+
+   useEffect(() => {
+      divElem.current.style.height = "auto";
+      divElem.current.style.overflow = "hidden";
+      divElem.current.style.transition = `height ${props.time ? props.time : "300ms"} ${props.animation ? props.animation : "ease"}`;
+      window.addEventListener("transitionend", onTransitionend);
+      props.toggle.current.addEventListener("click", toggleButton);
+      return () => {
+         window.removeEventListener("transitionend", onTransitionend);
+         props.toggle.current.removeEventListener("click", toggleButton);
+      };
+   });
+
+   const onTransitionend = () => {
+      if (divElem.current.clientHeight !== 0) {
+         divElem.current.style.height = "auto";
+      }
+   };
+
+   return (
+      <div style={props.styles} ref={divElem}>
+         {props.children}
+      </div>
+   );
+};
+
+export default HeightTransition;