A way to integrate the Tamedia paywall into your projects, in case you have to.
yarn add @ta-interaktiv/react-paywall
This component is already integrated into @ta-interaktiv/react-masthead and enabled by default. As long as you use the masthead as part of your project, you should be good to go. In other cases, refer to the example below.
import * as React from 'react'
import { Paywall as TamediaPaywall } from '@ta-interaktiv/react-paywall'
import { json } from 'd3-fetch'
export class MyComponent extends React.Component {
state = {
paywallConfiguration: {},
paywallStatus: 0
}
render() {
return (
<div>
{this.state.paywallStatus > 0
&& Object.entries(this.state.paywallConfiguration).length > 0
&& (<TamediaPaywall
isEnabled={true}
paywallConfiguration={this.state.paywallConfiguration}
paywallStatus={this.state.paywallStatus}
/>)
}
</div>
)
}
componentDidMount() {
// Get data from the Newsnet API, likely using d3-fetch
// and set it using setState
json(`//api-endpoint`).then(data => {
this.setState({
paywallConfiguration: data.paywall,
paywallStatus: data.configs.paywall_status
})
}
}
}
This component tracks the URL of the project. In case the appwebview
query
parameter is present, the component will not render the paywall, is in
this case this should be handled by the app itself.