Skip to content

Commit 80df2a8

Browse files
jossmacjavivelasco
authored andcommitted
Support custom wrapper component (#9)
Handy for use with [react-transition-group](https://github.com/reactjs/react-transition-group): ```js <TunnelPlaceholder id="dialog" component={TransitionProvider} /> ```
1 parent d0640d9 commit 80df2a8

File tree

1 file changed

+6
-3
lines changed

1 file changed

+6
-3
lines changed

src/TunnelPlaceholder.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,13 @@ import React, { Component, Fragment } from 'react'
44
class TunnelPlaceholder extends Component {
55
static propTypes = {
66
children: PropTypes.func,
7+
component: PropTypes.element,
78
id: PropTypes.string.isRequired,
89
multiple: PropTypes.bool,
910
}
10-
11+
static defaultProps = {
12+
component: Fragment,
13+
}
1114
static contextTypes = {
1215
tunnelState: PropTypes.object,
1316
}
@@ -30,7 +33,7 @@ class TunnelPlaceholder extends Component {
3033

3134
render() {
3235
const { tunnelState } = this.context
33-
const { id, children: renderChildren, multiple } = this.props
36+
const { id, children: renderChildren, component: Tag, multiple } = this.props
3437
const tunnelProps = tunnelState.getTunnelProps(id)
3538

3639
if (renderChildren) {
@@ -49,7 +52,7 @@ class TunnelPlaceholder extends Component {
4952
return null
5053
}
5154

52-
return <Fragment>{tunnelProps.children}</Fragment>
55+
return <Tag>{tunnelProps.children}</Tag>
5356
}
5457
}
5558

0 commit comments

Comments
 (0)