Support custom wrappers (#334)

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 (
       <div className='player-wrapper'>
-        <ReactPlayer 
+        <ReactPlayer
           className='react-player'
           url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
           width='100%'

index.d.ts

@@ -70,6 +70,7 @@ export interface ReactPlayerProps {
   style?: Object;
   progressInterval?: number;
   playsinline?: boolean;
+  wrapper?: any;
   config?: Config;
   soundcloudConfig?: SoundCloudConfig;
   youtubeConfig?: YouTubeConfig;

src/ReactPlayer.js

@@ -114,15 +114,15 @@ export default class ReactPlayer extends Component {
     return 0
   }
   render () {
-    const { url, style, width, height } = this.props
+    const { url, style, width, height, wrapper: Wrapper } = this.props
     const otherProps = omit(this.props, SUPPORTED_PROPS, DEPRECATED_CONFIG_PROPS)
     const activePlayer = this.renderActivePlayer(url)
     const preloadPlayers = renderPreloadPlayers(url, this.config)
     const players = [ activePlayer, ...preloadPlayers ].sort(this.sortPlayers)
     return (
-      <div ref={this.wrapperRef} style={{ ...style, width, height }} {...otherProps}>
+      <Wrapper ref={this.wrapperRef} style={{ ...style, width, height }} {...otherProps}>
         {players}
-      </div>
+      </Wrapper>
     )
   }
 }

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: {

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 }) => <div id='test-hook' data-fake-attribute='woah'>{children}</div>
+      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)
+    })
+  })
 })