Re-initialize script when props change

[alpezed]

Hi, I am using the react component and i just want to know if how can i reinitialize the script when the src props or image is change without reloading the page, for now if you can see the screenshot the old image is still exists and it's creating a nested div from freezeframe script.

[nickforddev]

Hmm this sounds like a real bug. I am in the process of porting the project to TypeScript, and will definitely address this asap.

[nickforddev]

@alpezed Can you show me how you are using the ReactFreezeframe component?

[alpezed]

Hi @nickforddesign

Here's the code my simple react component using ReactFreezeframe

/**
 * External dependencies
 */
import React, { Component } from 'react';
import ReactFreezeframe from 'react-freezeframe';

class GifPlayer extends Component {
	static slug = 'et_pb_better_gif_player';

	render() {
		const { image, on_hover, show_play } = this.props;

		const show_overlay = 'off' === on_hover && 'on' === show_play;

		if (!image) {
			return null;
		}

		return (
			<ReactFreezeframe 
				src={image}
				options={{
					trigger: 'on' === on_hover ? 'hover' : 'click',
					overlay: show_overlay ? true : false,
				}}
			/>
		);
	}
}

export default GifPlayer;

[nickforddev]

Sorry for the lack of activity on this. I just published the TypeScript re-write of vue-freezeframe, and fixed this issue in that library. react-freezeframe is next on the list to get a TypeScript re-write, and I will fix this issue.