Fix broken package (#47)

* Fix broken package

.circleci/config.yml

@@ -7,7 +7,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: circleci/node:10
+      - image: circleci/node:12
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images

README.md

@@ -64,8 +64,15 @@ $ npm install react-aspect-ratio
 
 **You will need to `import 'react-aspect-ratio/aspect-ratio.css'`**
 
+* Note
 ```js
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio'; // Recommended: if you are using React > 15.6
+
+import AspectRatio from 'react-aspect-ratio'; // Deprecated: if you are using React <= 15.6
+```
+
+```js
+import { AspectRatio } from 'react-aspect-ratio';
 
 const RatioImage = () => (
   <AspectRatio ratio="3/4" style={{ maxWidth: '400px' }}>
@@ -75,7 +82,7 @@ const RatioImage = () => (
 ```
 
 ```js
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio';
 
 const RatioIframe = () => (
   <AspectRatio ratio="560/315" style={{ maxWidth: '560px' }}>
@@ -87,7 +94,7 @@ const RatioIframe = () => (
 Can also use for background image
 
 ```js
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio';
 
 <AspectRatio
   ratio={0.75}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-aspect-ratio",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "description": "React Component to maintain a consistent width-to-height ratio (aspect ratio), preventing cumulative layout shift.",
   "author": "Roderick Hsiao <roderickhsiao@gmail.com>",
   "repository": {
@@ -38,7 +38,7 @@
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-class-properties": "^7.3.0",
     "@babel/plugin-transform-flow-strip-types": "^7.2.3",
-    "@babel/plugin-transform-spread": "^7.2.2",
+    "@babel/plugin-transform-spread": "7.12.1",
     "@storybook/react": "^6.0.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^25.1.0",

src/react-15.6.js

@@ -1,7 +1,9 @@
 // @flow
 import React, { Component } from 'react';
+import type { Element } from 'react';
 
 const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
+const DEFAULT_CLASS_NAME = 'react-aspect-ratio-placeholder';
 
 type Props = {
   ratio: string | number, // eslint-disable-line
@@ -11,7 +13,7 @@ type Props = {
 
 class AspectRatio extends Component<Props> {
   static defaultProps = {
-    className: 'react-aspect-ratio-placeholder',
+    className: DEFAULT_CLASS_NAME,
     ratio: 1
   };
 
@@ -36,7 +38,10 @@ class AspectRatio extends Component<Props> {
 
   render() {
     const {
-      ratio, style, children, ...otherProps
+      children,
+      ratio,
+      style,
+      ...restProps
     } = this.props; // eslint-disable-line no-unused-vars
 
     const newStyle = {
@@ -45,8 +50,8 @@ class AspectRatio extends Component<Props> {
       [CUSTOM_PROPERTY_NAME]: `(${ratio})`
     };
 
-    return ( // $FlowFixMe
-      <div ref={this.setNode} style={newStyle} {...otherProps}>
+    return (
+      <div {...restProps} ref={this.setNode} style={newStyle}>
         {children}
       </div>
     );

src/react-latest.js

@@ -2,6 +2,7 @@
 import React, { type Element } from 'react';
 
 const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
+const DEFAULT_CLASS_NAME = 'react-aspect-ratio-placeholder';
 
 type Props = {
   ratio: string | number, // eslint-disable-line
@@ -11,7 +12,10 @@ type Props = {
 
 const AspectRatio = (props: Props) => {
   const {
-    ratio, style, children, ...otherProps
+    children,
+    ratio,
+    style,
+    ...restProps
   } = props; // eslint-disable-line no-unused-vars
 
   const newStyle = {
@@ -20,15 +24,15 @@ const AspectRatio = (props: Props) => {
     [CUSTOM_PROPERTY_NAME]: `(${ratio})`
   };
 
-  return ( // $FlowFixMe
-    <div style={newStyle} {...otherProps}>
+  return (
+    <div {...restProps} style={newStyle}>
       {children}
     </div>
   );
 };
 
 AspectRatio.defaultProps = {
-  className: 'react-aspect-ratio-placeholder',
+  className: DEFAULT_CLASS_NAME,
   ratio: 1
 };
 

yarn.lock

@@ -870,7 +870,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-transform-spread@^7.12.1", "@babel/plugin-transform-spread@^7.12.13", "@babel/plugin-transform-spread@^7.2.2", "@babel/plugin-transform-spread@^7.8.3":
+"@babel/plugin-transform-spread@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.1.tgz#527f9f311be4ec7fdc2b79bb89f7bf884b3e1e1e"
+  integrity sha512-vuLp8CP0BE18zVYjsEBZ5xoCecMK6LBMMxYzJnh01rxQRvhNhH1csMMmBfNo5tGpGO+NhdSNW2mzIvBu3K1fng==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
+
+"@babel/plugin-transform-spread@^7.12.1", "@babel/plugin-transform-spread@^7.12.13", "@babel/plugin-transform-spread@^7.8.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.13.tgz#ca0d5645abbd560719c354451b849f14df4a7949"
   integrity sha512-dUCrqPIowjqk5pXsx1zPftSq4sT0aCeZVAxhdgs3AMgyaDmoUT0G+5h3Dzja27t76aUEIJWlFgPJqJ/d4dbTtg==