React Portal Modal with Blurred Background

index.jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

const Blur = (radius) = `
  filter: url(#svgBlur);
  filter: blur(${radius || 5}px);
`

const SVGBlur = ({ radius }) = (
  <svg style={{ position: 'absolute', top: '-99999px' }} xmlns="http://www.w3.org/2000/svg">
    <filter id="svgBlur" x="-5%" y="-5%" width="150%" height="150%">
      <feGaussianBlur in="SourceGraphic" stdDeviation={radius || 5} />
    </filter>
  </svg>
)

export default class Modal extends Component {
  constructor() {
    super()
    this.el = document.createElement('div')
    this.modalRoot = document.getElementById('modal')
    this.app = document.getElementById('app')
  }
  componentDidMount() {
    this.modalRoot.appendChild(this.el)
    this.app.setAttribute('style', Blur())
  }
  componentWillUnmount() {
    this.modalRoot.removeChild(this.el)
    this.app.setAttribute('style', '')
  }
  render() {
    const modal = (
      <div>
        {this.props.children}
        <SVGBlur />
      </div>
    )
    return ReactDOM.createPortal(
      {modal},
      this.el,
    )
  }
}

Can you share the DOM as well?

@Stophface it was from this app
https://github.com/benz2012/derby-dashboard/blob/0f2952343c4800fd63decf8354a024e4b259f8b4/src/js/containers/Modal/index.jsx

@benz2012 Thanks!