How to use react-player - 10 common examples

if (url === null) {
    return mm(false, message.missing, item)
  }
  if (url === false) {
    return mm(false, message.class, item)
  }
  // sanitize our URL with regex
  const sanitizedURL = sanitizeURL(url)
  // copy the item and update it's URL with the sanitized one
  const sanitizedItem = Object.assign(
    {},
    { ...item },
    { macarenaURL: sanitizedURL }
  )
  // check if reactplayer can play
  if (ReactPlayer.canPlay(sanitizedURL)) {
    return mm(true, message.valid, sanitizedItem)
  }
  // if nothing has gone well for this URL we just tell it not to play
  return mm(false, message.noPlay, item)
}

)}
          
        
      
      <p>{proposal.description}</p>
      {proposal.status === 'ReadyForProcessing' &amp;&amp; currentUser &amp;&amp; (
        <button> processProposal(proposal.id)}&gt;Process</button>
      )}
      <div>
        {s3Data.description ? (
          <div>
            <h5>Description</h5>
            <p>{s3Data.description}</p>
          </div>
        ) : null}
        {s3Data.link &amp;&amp; ReactPlayer.canPlay(s3Data.link) ? (
          <div>
            
          </div>
        ) : s3Data.link &amp;&amp; s3Data.link.indexOf('http') &gt; -1 ? (
          <div>
            <a rel="noopener noreferrer" href="{s3Data.link}">
              Link
            </a>
          </div>
        ) : null}
      </div>

componentDidUpdate (prevProps, prevState) {
    const { id: oldId, fullscreen, volume, speed, quality } = this.state
    const { id, streams, streamsLoaded, autoPlay } = this.props
    if (id !== oldId && streamsLoaded) {
      let stream = ''
      if (streams.length) stream = streams[0].url
      this.setState({ ...defaultState, id, fullscreen, stream, canPlay: ReactPlayer.canPlay(stream), paused: !autoPlay, })
      this.loggedTime = this.props.media.playhead || 0
    }
    if (volume !== prevState.volume || speed !== prevState.speed || quality !== prevState.quality) {
      this.persistState()
    }
  }

this.props.messages.forEach(message => {
        let userId = message.user_id
        if (message !== undefined && this.props.serverMembers[userId]!== undefined){
          let messageBody = (<p>{message.body}</p>)
          if (message.body.includes('https')) {
            let player = '';
            if(ReactPlayer.canPlay(message.body)){
              player = ();
            }

            messageBody = (
              <div style="{{width:">
                <p>
                  <a href="{message.body}" style="{{color:">{message.body}</a>
                  {player}
                </p>
              </div>
            );
          }
          messages.push(
          <section>

              <div></div></section>

function reactPlayerValidator(block) {
  const url = getURL(block)
  let result
  if (reactPlayer.canPlay(url)) {
    result = mark(true, 'REACT_PLAYER_CANPLAY')
  } else {
    result = mark(false, 'REACT_PLAYER_NOPLAY')
  }
  return result
}

get activePlayer() {
    if (YoutubePlayer.canPlay(this.url)) {
      return this.youtubePlayer
    } else if (SoundcloudPlayer.canPlay(this.url)) {
      return this.soundcloudPlayer
    }
  }
  onSeekChange = value => this.setState({played: value})

get soundcloudProps() {
    if (SoundcloudPlayer.canPlay(this.url)) {
      return this.activeProps
    } else {
      return {
        url: "https://soundcloud.com/miami-nights-1984/accelerated",
        playing: false,
      }
    }
  }