How can I implement this in react?

[schmidtsonian]

[schmidtsonian]

I'm doing a custom component in next.js with typescript:

import { Component } from 'react';

export type SubscriptionButtonSrc = string|number;

interface SubscriptionButtonProps {}

declare global {
  interface Window { podcastData: any; }
}

export default class SubscriptionButton<P extends SubscriptionButtonProps> extends Component<P> {

  componentDidMount() {
    window.podcastData={
      "title":"podcast title",
      "subtitle":"",
      "description":"",
      "cover":"",
      "feeds":[
        {
          "type":"audio",
          "format":"mp3",
          "url":"",
          "directory-url-itunes":"https://podcasts.apple.com/de/podcast/ki-in-der-industrie/id1451196082?l=en"
        },
        {
          "type":"audio",
          "format":"mp3",
          "url":"https://open.spotify.com/show/5bZ2ycqHSddXZqhYJmOwMZ"
        },
        {
          "type":"audio",
          "format":"mp3",
          "url":"",
          "directory-url-itunes":"https://podcasts.google.com/?feed=aHR0cHM6Ly9raXBvZGNhc3QucG9kaWdlZS5pby9mZWVkL21wMw%3D%3D"
        }
      ]
    };
  }

  public render() {
    return (
      <>
        <script
          className="podlove-subscribe-button"
          src="https://cdn.podlove.org/subscribe-button/javascripts/app.js"
          data-language="en"
          data-size="medium"
          data-json-data="podcastData"
          data-color="#ffffff"
          data-format="rectangle"
          data-style="outline" />
        <noscript><a href="" >Subscribe to feed</a></noscript>
      </>
    );
  }
}

but there is an error in the console:

[saerdnaer]

see https://github.com/podlove/podlove-ui/tree/development/apps/subscribe-button

[olastor]

Had the same issue as @schmidtsonian and think this works as a solution:

import React from 'react';

class SubscribeButton extends React.Component {
  componentDidMount() {
    const {
      title,
      imageUrl,
      feedUrl,
      itunesLink
    } = this.props;

    if (typeof window === 'undefined') {
      return;
    }

    const dataKey = `podcastData-${feedUrl}`
    window[dataKey] = {
      title: title,
      subtitle: '',
      description: '',
      cover: imageUrl,
      feeds: [
        {
          type: 'audio',
          format: 'mp3',
          url: feedUrl,
          'directory-url-itunes': itunesLink
        }
      ]
    }

    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://cdn.podlove.org/subscribe-button/javascripts/app.js';

    script.setAttribute('class', 'podlove-subscribe-button')
    script.setAttribute('data-language', 'en')
    script.setAttribute('data-size', 'medium')
    script.setAttribute('data-json-data', dataKey)
    script.setAttribute('data-color', '#469cd1')
    script.setAttribute('data-format', 'rectangle')
    script.setAttribute('data-style', 'filled')

    this.span.appendChild(script);
  }

  render() {
    const { feedUrl } = this.props;

    return <span ref={el => (this.span = el)}>
      <noscript>
        <a href={feedUrl}>Subscribe to feed</a>
      </noscript>
    </span>
  }
}

export default SubscribeButton;