react-animate-height
Advanced tools
react-animate-height - npm Package Compare versions
Comparing version 2.1.2 to 3.0.0-beta.1
| # Changelog | ||
| ### v3.0.0 | ||
| 01.06.2022. | ||
| **Changed** | ||
| * Rewritten to hooks | ||
| * Switched to TypeScript | ||
| * Callback names changed | ||
| * `onAnimationStart` -> `onHeightAnimationStart` | ||
| * `onAnimationEnd` -> `onHeightAnimationEnd` | ||
| ----- | ||
| ### v2.1.1, v2.1.2 | ||
@@ -4,0 +18,0 @@ |
| { | ||
| "name": "react-animate-height", | ||
| "version": "2.1.2", | ||
| "version": "3.0.0-beta.1", | ||
| "description": "Lightweight React component for animating height using CSS transitions.", | ||
| "main": "lib/AnimateHeight.js", | ||
| "types": "lib/index.d.ts", | ||
| "main": "dist/cjs/index.js", | ||
| "module": "dist/esm/index.js", | ||
| "types": "dist/esm/index.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "import": "./dist/mjs/index.js", | ||
| "require": "./dist/esm/index.js" | ||
| } | ||
| }, | ||
| "author": "Stanko", | ||
@@ -17,43 +24,11 @@ "homepage": "https://github.com/Stanko/react-animate-height", | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1", | ||
| "start": "webpack-dev-server", | ||
| "build": "rm -rf ./lib && NODE_ENV=\"production\" babel ./source --out-dir ./lib && cp source/index.d.ts ./lib", | ||
| "build-docs": "rm -rf ./dist-docs && EXAMPLE=\"true\" NODE_ENV=\"production\" webpack", | ||
| "publish-to-npm": "npm run build && npm publish", | ||
| "publish-docs": "sh publish-docs.sh", | ||
| "publish-all": "npm run publish-to-npm && npm run publish-docs", | ||
| "postpublish": "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags", | ||
| "lint-break-on-errors": "eslint ./source ./webpack.config.js -f table --ext .js --ext .jsx", | ||
| "lint": "eslint ./source ./webpack.config.js -f table --ext .js --ext .jsx || true", | ||
| "preview": "rm -rf ./dist && NODE_ENV=\"production\" webpack-dev-server" | ||
| "clean": "rm -rf dist", | ||
| "build:esm": "tsc -p tsconfig-esm.json && echo '{ \"type\": \"module\" }' > dist/esm/package.json", | ||
| "build:cjs": "tsc -p tsconfig-cjs.json && echo '{ \"type\": \"commonjs\" }' > dist/cjs/package.json", | ||
| "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:docs", | ||
| "start": "esbuild docs/docs.tsx docs/docs.css --bundle --tsconfig=tsconfig-demo.json --servedir=docs --outdir=docs/react-animate-height", | ||
| "build:docs": "esbuild docs/docs.tsx --bundle --tsconfig=tsconfig-demo.json --outdir=docs --minify --sourcemap" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-cli": "^6.24.1", | ||
| "babel-core": "^6.26.3", | ||
| "babel-eslint": "^7.1.0", | ||
| "babel-loader": "^6.2.4", | ||
| "babel-plugin-transform-object-rest-spread": "^6.23.0", | ||
| "babel-plugin-transform-runtime": "^6.6.0", | ||
| "babel-preset-es2015": "^6.22.0", | ||
| "babel-preset-react": "^6.5.0", | ||
| "babel-preset-react-hmre": "^1.1.1", | ||
| "babel-runtime": "^6.6.1", | ||
| "css-loader": "^0.28.11", | ||
| "eslint": "^3.10.1", | ||
| "eslint-config-airbnb": "^13.0.0", | ||
| "eslint-plugin-import": "^2.12.0", | ||
| "eslint-plugin-jsx-a11y": "^2.2.3", | ||
| "eslint-plugin-react": "^6.7.1", | ||
| "extract-text-webpack-plugin": "^2.1.0", | ||
| "html-webpack-plugin": "^2.24.1", | ||
| "postcss-loader": "^1.1.1", | ||
| "react": "^18.0.0", | ||
| "react-dom": "^18.0.0", | ||
| "style-loader": "^0.18.2", | ||
| "webpack": "^2.6.1", | ||
| "webpack-dev-server": "^2.2.1" | ||
| }, | ||
| "dependencies": { | ||
| "classnames": "^2.2.5", | ||
| "prop-types": "^15.6.1" | ||
| "classnames": "^2.3.1" | ||
| }, | ||
@@ -75,3 +50,11 @@ "peerDependencies": { | ||
| ], | ||
| "license": "MIT" | ||
| } | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "@types/react": "^18.0.9", | ||
| "@types/react-dom": "^18.0.5", | ||
| "esbuild": "^0.14.39", | ||
| "react": "^18.1.0", | ||
| "react-dom": "^18.1.0", | ||
| "typescript": "^4.7.2" | ||
| } | ||
| } |
109
README.md
@@ -14,8 +14,12 @@ # React Animate Height | ||
| ### Note about versions | ||
| ### Version 3 | ||
| For React >=16.3.0 make sure you are using v2.x. | ||
| This is a version 3.x branch, for version 2.x, check (v2 branch)[https://github.com/Stanko/react-animate-height/tree/v2] | ||
| Read more about [React lifecycle changes](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) introduced with React 16.3. | ||
| #### Breaking changes: | ||
| - Callback names changed (to avoid clashing with the native ones): | ||
| - `onAnimationStart` -> `onHeightAnimationStart` | ||
| - `onAnimationEnd` -> `onHeightAnimationEnd` | ||
| ## Demo | ||
@@ -34,3 +38,3 @@ | ||
| Then open [`localhost:8080`](http://localhost:8080) in your browser of choice browser. | ||
| Then open [`localhost:8080`](http://127.0.0.1:8000/) in your browser of choice browser. | ||
@@ -50,44 +54,29 @@ Or play with this [sandbox](https://codesandbox.io/s/react-animate-height-basic-example-ql384). | ||
| ```jsx | ||
| import React, { Component } from 'react'; | ||
| import React, { useState } from 'react'; | ||
| import AnimateHeight from 'react-animate-height'; | ||
| export default class Example extends Component { | ||
| state = { | ||
| height: 0, | ||
| }; | ||
| const Example = () => { | ||
| const [height, setHeight] = useState(0); | ||
| toggle = () => { | ||
| const { height } = this.state; | ||
| return ( | ||
| <div> | ||
| <button | ||
| aria-expanded={height !== 0} | ||
| aria-controls="example-panel" | ||
| onClick={() => setHeight(height === 0 ? 'auto' : 0)} | ||
| > | ||
| {height === 0 ? 'Open' : 'Close'} | ||
| </button> | ||
| this.setState({ | ||
| height: height === 0 ? 'auto' : 0, | ||
| }); | ||
| }; | ||
| render() { | ||
| const { height } = this.state; | ||
| return ( | ||
| <div> | ||
| <button | ||
| aria-expanded={ height !== 0 } | ||
| aria-controls='example-panel' | ||
| onClick={ this.toggle } | ||
| > | ||
| { height === 0 ? 'Open' : 'Close' } | ||
| </button> | ||
| <AnimateHeight | ||
| id='example-panel' | ||
| duration={ 500 } | ||
| height={ height } // see props documentation below | ||
| > | ||
| <h1>Your content goes here</h1> | ||
| <p>Put as many React or HTML components here.</p> | ||
| </AnimateHeight> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| <AnimateHeight | ||
| id="example-panel" | ||
| duration={500} | ||
| height={height} // see props documentation below | ||
| > | ||
| <h1>Your content goes here</h1> | ||
| <p>Put as many React or HTML components here.</p> | ||
| </AnimateHeight> | ||
| </div> | ||
| ); | ||
| }; | ||
| ``` | ||
@@ -97,3 +86,3 @@ | ||
| * **height**: numeric or percentage value (ie. `'50%'`) or `'auto'`, required | ||
| - **height**: numeric or percentage value (ie. `'50%'`) or `'auto'`, required | ||
@@ -103,19 +92,19 @@ When changed, element height will be animated to that height.<br/> | ||
| * **duration**: integer, default: `250` | ||
| - **duration**: integer, default: `250` | ||
| Duration of the animation in milliseconds | ||
| * **delay**: integer, default: `0` | ||
| - **delay**: integer, default: `0` | ||
| Animation delay in milliseconds | ||
| * **easing**: string, default: `'ease'` | ||
| - **easing**: string, default: `'ease'` | ||
| CSS easing function to be applied to the animation | ||
| * **id**: string | ||
| - **id**: string | ||
| HTML `id` attribute. | ||
| * **className**: string | ||
| - **className**: string | ||
@@ -126,3 +115,3 @@ CSS class to be applied to the element | ||
| * **style**: object | ||
| - **style**: object | ||
@@ -133,3 +122,3 @@ CSS style object, it will be merged with inline styles of the component | ||
| * **contentClassName**: string | ||
| - **contentClassName**: string | ||
@@ -140,3 +129,3 @@ CSS class to be applied to content wrapper element | ||
| * **animationStateClasses**: object | ||
| - **animationStateClasses**: object | ||
@@ -163,3 +152,3 @@ Object containing CSS class names for animation states, default: | ||
| * **onAnimationStart**: function | ||
| - **onHeightAnimationStart**: function | ||
@@ -170,3 +159,3 @@ Callback which will be called when animation starts. | ||
| * **onAnimationEnd**: function | ||
| - **onHeightAnimationEnd**: function | ||
@@ -177,3 +166,3 @@ Callback which will be called when animation ends. | ||
| * **applyInlineTransitions**: boolean, default: `true` | ||
| - **applyInlineTransitions**: boolean, default: `true` | ||
@@ -183,7 +172,7 @@ If this flag is set to `false` only CSS classes will be applied to the element and inline | ||
| * **animateOpacity**: boolean, default: `false` | ||
| - **animateOpacity**: boolean, default: `false` | ||
| If set to `true` content will fade-in (and fade-out) while height is animated. | ||
| * **aria-hidden**: boolean | ||
| - **aria-hidden**: boolean | ||
@@ -201,3 +190,3 @@ By default, library will set `aria-hidden` to `true` when height is zero. If you wish to override it, you can pass the prop yourself. | ||
| ```jsx | ||
| <button | ||
| <button | ||
| aria-expanded={ height !== 0 } | ||
@@ -222,2 +211,6 @@ aria-controls='example-panel' // it has to match the id passed to AnimateHeight | ||
| ### Collapsing margins | ||
| While it is animating, component has `overflow: hidden`. When the animation is finished and height is set to "auto", `overflow: hidden` is removed. At that moment, any margins you have on the content inside `AnimateHeight` will collapse, causing content to "jump". To avoid this, just use padding inside the `AnimateHeight` instead of margins. | ||
| ### Bounded flexboxes | ||
@@ -232,3 +225,3 @@ | ||
| You can do it by passing a `className` or directly in the `style` prop | ||
| You can do it by passing a `className` or directly in the `style` prop | ||
@@ -235,0 +228,0 @@ ```jsx |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1024.24%
572173
- Dependency count
- decreased by-25%
3
- Dev dependency count
- decreased by-75%
6
- Number of package files
- increased by53.85%
20
- Lines of code
- increased by89%
1580
Worsened metrics
- Number of lines in readme file
- decreased by-3.06%
222
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
- Removedprop-types@^15.6.1
- Removedobject-assign@4.1.1(transitive)
- Removedprop-types@15.8.1(transitive)
- Removedreact-is@16.13.1(transitive)
Updatedclassnames@^2.3.1