diff --git a/README.md b/README.md index bc0ba996..ea5f2fc5 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ Prop | Description | Default `style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element | `{}` `progressInterval` | The time between `onProgress` callbacks, in milliseconds | `1000` `playsinline` | Applies the `playsinline` attribute where supported | `false` +`wrapper` | Element or component to use as the container element | `div` `config` | Override options for the various players, see [config prop](#config-prop) #### Callback props @@ -167,7 +168,7 @@ class ResponsivePlayer extends Component { render () { return (
- + {players} -
+ ) } } diff --git a/src/props.js b/src/props.js index b1f04942..7af38876 100644 --- a/src/props.js +++ b/src/props.js @@ -15,6 +15,7 @@ export const propTypes = { style: object, progressInterval: number, playsinline: bool, + wrapper: oneOfType([ string, func ]), config: shape({ soundcloud: shape({ options: object @@ -70,6 +71,7 @@ export const defaultProps = { style: {}, progressInterval: 1000, playsinline: false, + wrapper: 'div', config: { soundcloud: { options: { diff --git a/test/specs/ReactPlayer.js b/test/specs/ReactPlayer.js index 903d3f85..83c7ce60 100644 --- a/test/specs/ReactPlayer.js +++ b/test/specs/ReactPlayer.js @@ -393,4 +393,32 @@ describe('ReactPlayer', () => { expect(ReactPlayer.canPlay('file.txt')).to.be.false expect(ReactPlayer.canPlay([ 'http://example.com', 'file.txt' ])).to.be.false }) + + describe('wrapper prop', () => { + it('defaults wrapper to a div', () => { + renderPlayer({ + url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' + }) + expect(player.wrapper).to.be.a('HTMLDivElement') + }) + + it('supports custom wrapper elements', () => { + renderPlayer({ + wrapper: 'p', + url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' + }) + expect(player.wrapper).to.be.a('HTMLParagraphElement') + }) + + it('supports custom wrapper components', () => { + const CustomWrapper = ({ children }) =>
{children}
+ renderPlayer({ + wrapper: CustomWrapper, + url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' + }) + const el = document.getElementById('test-hook') + expect(el.dataset.fakeAttribute).to.equal('woah') + expect(el.querySelectorAll('video').length).to.equal(1) + }) + }) })