diff --git a/.babelrc b/.babelrc index 2f01e1d..9bc8e32 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,4 @@ { - "presets": ["env"] + "presets": ["env"], + "plugins": ["transform-object-rest-spread"] } \ No newline at end of file diff --git a/README.md b/README.md index c6194b7..6e5eb75 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,9 @@ npm install --save react-responsive-embed Then in your app import `ResponsiveEmbed` and in JSX flavour you might do: ```html - + + ``` -Pass in a `ratio` prop to pick a different one. Any ratio will do: +Pass a `ratio` property to pick a different one. Any ratio will do: ```html - + + 
<ResponsiveEmbed ratio='4:3' src='https://www.youtube.com/embed/mM5_T-F1Yn4' />

https://github.com/tableflip/react-responsive-embed

\ No newline at end of file +
TABLEFLIP

React ResponsiveEmbed

You want to embed a YouTube or other `iframe` style embedded content, and you'd like it to take up the available width, and retain it's aspect ratio.

Much like the Bootstrap responsive embed helpers of old, but for react.

<ResponsiveEmbed ratio='16:9'>
  <iframe src='https://www.youtube.com/embed/2yqz9zgoC-U' />
</ResponsiveEmbed>
<ResponsiveEmbed ratio='4:3'>
  <iframe src='https://www.youtube.com/embed/mM5_T-F1Yn4' />
</ResponsiveEmbed>

https://github.com/tableflip/react-responsive-embed

\ No newline at end of file diff --git a/package.json b/package.json index 4900690..256fea0 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "devDependencies": { "ava": "^0.17.0", "babel-cli": "^6.22.2", + "babel-plugin-transform-object-rest-spread": "^6.22.0", "babel-preset-env": "^1.1.8", "react-addons-test-utils": "^15.0", "react-dom": "^15.0", @@ -25,9 +26,9 @@ "engines": { "node": ">=6.0" }, - "directories": { - "doc": "docs", - "test": "test" + "ava": { + "require": ["babel-register"], + "babel": "inherit" }, "repository": { "type": "git", diff --git a/src/index.js b/src/index.js index 750aa46..1a0c50b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,26 +1,10 @@ const React = require('react') const PropTypes = React.PropTypes -const div = React.createElement.bind(React, 'div') -const iframe = React.createElement.bind(React, 'iframe') - -const divStyle = { - position: 'relative', - height: 0, - overflow: 'hidden', - maxWidth: '100%' -} - -const iframeStyle = { - position: 'absolute', - top: 0, - left: 0, - width: '100%', - height: '100%' -} /* - * Turn `16:9` into `9 / 16` into `56.25%` - * Turn `4:3` into `3 / 4` into `75%` + * Turns a ratio into a percentage + * Turns `16:9` into `9 / 16` into `56.25%` + * Turns `4:3` into `3 / 4` into `75%` */ const ratioToPercent = (ratio) => { const [w, h] = ratio.split(':').map((num) => Number(num)) @@ -28,24 +12,37 @@ const ratioToPercent = (ratio) => { } /* - * Usage: + * Usage: + * + *