Как инициализировать magnific popup в react компоненте?

Question

[Дмитрий]

Здравствуйте. Есть сайт на котором использовался jQuery плагин magnific-popup. Мне нужно перевести его на react. На странице есть галерея изображений которая отображается с помощью magnific popup. Я понимаю, что лучше полностью переделать все это с jquery на react, но в данном случае инициализация не простая и проще будет оставить jquery.
Для наглядности вот init плагина:

$('.good__gallerySlider .slick-track').each(function() {
            $(this).magnificPopup({
                type:'image',
                removalDelay: 500,
                mainClass: 'mfp-fade popup_inline',
                showCloseBtn: true,
                closeMarkup: '<div class="mfp-close">&times;</div>',
                closeBtnInside: true,
                closeOnContentClick: false,
                closeOnBgClick: true,
                alignTop: false,
                fixedContentPos: true,
                callbacks: {
                    open: function() {
                        var headerHeight = $('.header__top').innerHeight();
                        $('.mfp-content').css({
                            'marginTop': headerHeight,
                        });

                        var mp = $.magnificPopup.instance,
                            t = $(mp.currItem.el[0]);

                        if ( t.data('type') === 'video' ) {
                            if ( !$(this.wrap[0]).find('img.mfp-img').hasClass('has__video') ) {
                                var $imgVideo = $(this.wrap[0]).find('img.mfp-img'),
                                    $dataVideo = $(this.currItem.el).attr('href');
                                $imgVideo.addClass('has__video').attr('data-video', $dataVideo);
                                $imgVideo.parent('figure').addClass('wrap__hasVideo');
                                if ( !$imgVideo.parent('figure').find('.hasVideo__play').length ) {
                                    $imgVideo.parent('figure').append('<div class="hasVideo__play"></div>');
                                }
                            }
                        }
                    },
                    close: function() {

                    },
                    beforeOpen: function() {
                        var $triggerEl = $(this.st.el),
                            newClass = 'productsSingle__gallery';
                        this.st.mainClass = this.st.mainClass + ' ' + newClass;

                        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
                    },
                    elementParse: function(item) {
                        item.src = item.el.find('img').attr('src');

                    },
                    markupParse: function(template, values, item) {

                    },
                    change: function(){
                        var mp = $.magnificPopup.instance,
                            t = $(mp.currItem.el[0]);

                        if ( !$(this.content[0]).find('img.mfp-img').hasClass('has__video') ) {
                            $(this.content[0]).find('img.mfp-img').parent('figure').find('iframe').remove();
                        }

                        if ( t.data('type') === 'video' ) {
                            if ( !$(this.content[0]).find('img.mfp-img').hasClass('has__video') ) {
                                var $imgVideo = $(this.content[0]).find('img.mfp-img'),
                                    $dataVideo = $(this.currItem.el).attr('href');

                                $imgVideo.addClass('has__video').attr('data-video', $dataVideo);
                                $imgVideo.parent('figure').addClass('wrap__hasVideo');
                                if ( !$imgVideo.parent('figure').find('.hasVideo__play').length ) {
                                    $imgVideo.parent('figure').append('<div class="hasVideo__play"></div>');
                                }

                            }
                        } else {
                            $(this.content[0]).find('img.mfp-img').parent('figure').removeClass('wrap__hasVideo');
                            $(this.content[0]).find('img.mfp-img').parent('figure').find('.hasVideo__play').remove();
                        }
                    }
                },
                gallery: {
                    enabled:true,
                    navigateByImgClick: false,
                },
                delegate: '.good__gallerySliderItem',
            });

Пробовал инитить его в componentDidMount() но пока безуспешно

Кто-то сталкивался с похожим?

Comments

[Антон Спирин]

Просто используйте аналогичную библиотеку для просмотра изображений для React.

[Дмитрий]

Антон Спирин, это не просто, если бы простая галерея была, тогда да, согласен. Здесь стили css, инициализация(просмотрите ее). Все надо переделать заново.

[Антон Спирин]

Дмитрий, стилизовать не долго. Главное найти с аналогичным интерфейсом.

[Дмитрий]

Антон Спирин, решил вопрос. Обернул инициализацию в функцию

export default function singleProductPopupInit($elem){
    $elem.each(function() {
        $(this).magnificPopup({
            type:'image',
            removalDelay: 500,
            mainClass: 'mfp-fade popup_inline',
            showCloseBtn: true,
            closeMarkup: '<div class="mfp-close">&times;</div>',
            closeBtnInside: true,
            closeOnContentClick: false,
            closeOnBgClick: true,
            alignTop: false,
            fixedContentPos: true,
            callbacks: {
                open: function() {
                    var headerHeight = $('.header__top').innerHeight();
                    $('.mfp-content').css({
                        'marginTop': headerHeight,
                    });

                    var mp = $.magnificPopup.instance,
                        t = $(mp.currItem.el[0]);

                    if ( t.data('type') === 'video' ) {
                        if ( !$(this.wrap[0]).find('img.mfp-img').hasClass('has__video') ) {
                            var $imgVideo = $(this.wrap[0]).find('img.mfp-img'),
                                $dataVideo = $(this.currItem.el).attr('href');
                            $imgVideo.addClass('has__video').attr('data-video', $dataVideo);
                            $imgVideo.parent('figure').addClass('wrap__hasVideo');
                            if ( !$imgVideo.parent('figure').find('.hasVideo__play').length ) {
                                $imgVideo.parent('figure').append('<div class="hasVideo__play"></div>');
                            }
                        }
                    }
                },
                close: function() {

                },
                beforeOpen: function() {
                    var $triggerEl = $(this.st.el),
                        newClass = 'productsSingle__gallery';
                    this.st.mainClass = this.st.mainClass + ' ' + newClass;

                    this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
                },
                elementParse: function(item) {
                    item.src = item.el.find('img').attr('src');

                },
                markupParse: function(template, values, item) {

                },
                change: function(){
                    var mp = $.magnificPopup.instance,
                        t = $(mp.currItem.el[0]);

                    if ( !$(this.content[0]).find('img.mfp-img').hasClass('has__video') ) {
                        $(this.content[0]).find('img.mfp-img').parent('figure').find('iframe').remove();
                    }

                    if ( t.data('type') === 'video' ) {
                        if ( !$(this.content[0]).find('img.mfp-img').hasClass('has__video') ) {
                            var $imgVideo = $(this.content[0]).find('img.mfp-img'),
                                $dataVideo = $(this.currItem.el).attr('href');

                            $imgVideo.addClass('has__video').attr('data-video', $dataVideo);
                            $imgVideo.parent('figure').addClass('wrap__hasVideo');
                            if ( !$imgVideo.parent('figure').find('.hasVideo__play').length ) {
                                $imgVideo.parent('figure').append('<div class="hasVideo__play"></div>');
                            }

                        }
                    } else {
                        $(this.content[0]).find('img.mfp-img').parent('figure').removeClass('wrap__hasVideo');
                        $(this.content[0]).find('img.mfp-img').parent('figure').find('.hasVideo__play').remove();
                    }
                }
            },
            gallery: {
                enabled:true,
                navigateByImgClick: false,
            },
            delegate: '.good__gallerySliderItem',
        });
    });
}

а при рендере компонента вызываю его в componentDidMount()

componentDidMount() {
        const {setProductSingle} = this.props;
        const productSlug = this.props.match.params.product;

        axios.get(`/api/products/${productSlug}`)
            .then( ({data}) => {
                setProductSingle(data);
            })
            .then(() => {
                this.setState({
                    nav1: this.slider1,
                    nav2: this.slider2
                });

                this.$el = $('.good__gallerySlider .slick-track');

                singleProductPopupInit( this.$el );
            });
    }

[Антон Спирин]

Дмитрий, решение плохо тем, что вы притащили в проект JQuery