Integration with React

[luisnomad]

Hi there!

I have used your PIG library and it rocks big time. I have half-integrated it within a React project, and now it's time to refactor it so it doesn't use document.createElement anymore, calling React.createElement instead. I bet it's going to be fun.

If anyone is interested in participating or playing around with it, let me know. I am using this as an exercise to really learn React, so I am no expert. I hope doing this will change that 😄

[hooram]

Hey!
I'm also trying to use this in my React project, but I'm having some trouble with integration as this is my first React project. Would you care to give me some pointers or to your code?

Much appreciated!

[claudioviola]

Very interested. From where can we start? Have you got updates about this?
Probably should be better fork this...

[vineeth-pradhan]

@luisnomad Hey! I'm in for contributing to the idea. Have you gotten somewhere with this so far so that I would know to start a fresh or join you from where you are right now

[vineeth-pradhan]

@luisnomad @hooram @claudioviola I began to work on this. Any contributions from you will be helpful

[claudioviola]

@porsamini great! Thanks

I see in your repo it's not possible leave any issue.

What do you think about pagination features, allow images selectable and open a lightbox for show the image in fullscreen?

[vineeth-pradhan]

@claudioviola

I just added issues tab

Lightbox is on my mind too. If you notice the changes in the forked repo, you can see onClick method has been added to facilitate this feature. I must continue working on this after I get the test cases ready and publish it. I've planned to write another react plugin which should exactly look like facebook's lightbox(image on the left and text contents on the right) and integrate that into pig.js

I was working on AJAX but it was consuming too much time for me to implement the onScroll feature. Have you worked on this onScroll feature before?

[claudioviola]

@porsamini
Have you considered to implement lightbox here
https://github.com/fritz-c/react-image-lightbox
in this first step I think is really simple to implement it

When you talk about to implement onScroll feature you are talking about pagination when the y scroll value get the bottom?

[vineeth-pradhan]

@claudioviola

Have you considered to implement lightbox here
https://github.com/fritz-c/react-image-lightbox

Yes, I looked at it but I didn't really find my purpose as I wanted the image on the left and any html content on the right. So, I will come up with a new plugin for it

When you talk about to implement onScroll feature you are talking about pagination when the y scroll value get the bottom?

Yep. I tried this with addEventListener('scroll', ()) but that seemed to fire multiple AJAX request every time after crossing the "bottom line". So, I thought, I'll look at it sometime later and not really a priority at this moment.

If you make any developments on these remaining items, fire me an email and we can chat up on Hangouts

[nickmcmillan]

I'll also throw my hat into the ring for this feature.

I've created a package which re-implements Pig's logic into a React component, with a few extra features added.

https://github.com/nickmcmillan/pig-react

Each image is clickable and expands to fill the center of the screen. I've used React Spring to handle the transition.

Instead of hosting images locally and keeping multiple versions at different dimensions I've used an image hosting service instead which can handle resizing on the fly.

Overall the performance looks quite good. I've put up a demo site here https://pigreact.netlify.com/

I'd love to know if anyone finds it helpful!

[luisnomad]

I'll also throw my hat into the ring for this feature.

I've created a package which re-implements Pig's logic into a React component, with a few extra features added.

https://github.com/nickmcmillan/pig-react

Each image is clickable and expands to fill the center of the screen. I've used React Spring to handle the transition.

Instead of hosting images locally and keeping multiple versions at different dimensions I've used an image hosting service instead which can handle resizing on the fly.

Overall the performance looks quite good. I've put up a demo site here https://pigreact.netlify.com/

I'd love to know if anyone finds it helpful!

### This is Awesome!