Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Sandra
    @neptunian
    yea im definitely all about the full-fledged examples , just wasn't sure how happy people are to download them.
    Joss Mackison
    @jossmac
    download the images?
    Sandra
    @neptunian
    just the website examples i mean. i suppose its not very big, though. i know the images aren't downloaded
    Joss Mackison
    @jossmac
    the examples are on git, but excluded from npm
    Sandra
    @neptunian
    oh right, durr. i thought i saw people huffing about this but must have been back when the images were being included.
    Joss Mackison
    @jossmac
    yeah, i've tidied it up a lot. +4,000 / -40,000 lines changed, huge reduction from the lib/dist of old haha
    Sandra
    @neptunian
    nice!
    Michael Kalygin
    @mkalygin
    This is great, I like the new look and feel of the lightbox. :)
    Joss Mackison
    @jossmac
    Thanks @mkalygin

    Alpha released to npm:

    yarn add react-images@next

    New docs updated:
    bit.ly/react-images-v1

    Michelangelo Partipilo
    @mpartipilo
    I tried installing @next with npm and it didn't work. It seems to be missing files, or that all the files are in a "src" folder
    same with yarn
    Joss Mackison
    @jossmac
    Thanks for the heads up @mpartipilo I'll look into it
    Sandra
    @neptunian
    @jossmac how are things coming along? would like to try it out!
    Joss Mackison
    @jossmac

    @neptunian glad you're keen to give v1 a go -- you can just install the alpha. Can't wait to hear your feedback!

    Unfortunately I've been spending most of my time outside of work on react-select recently. Not a lot of time for react-images.

    Please let me know if there's anything I can give you a hand with :smile:

    Joss Mackison
    @jossmac
    I'm actually a bit stuck on pagination -- do you think we should just release v1 and resolve pagination/thumbs in a subsequent minor?
    Sandra
    @neptunian
    @jossmac going to play around with it today. do you feel that's the only thing left to complete for v1?
    Joss Mackison
    @jossmac
    It's hard to say; will be great to get another pair of eyes on the codebase!
    Sandra
    @neptunian
    @jossmac slowly going through it!
    Sandra
    @neptunian
    @jossmac i'm not familiar with Flow, how do you find it?
    Joss Mackison
    @jossmac
    Hey @neptunian! You need a hand with flow?
    Joss Mackison
    @jossmac
    What do you need to find?
    Joss Mackison
    @jossmac
    Oh sorry, I misinterpreted! It took a while to get used to, but now I love it
    Sandra
    @neptunian
    lol. cool
    Sandra
    @neptunian
    hey @jossmac , i'm looking over v1
    for Carousel "components" prop that accepts an object of components... is it possible for the user to pass in their own custom props on their custom components and get them back in their component? I think there may be some use cases where this would be needed
    like the way "render props" works where you can pass in props
    Sandra
    @neptunian
    Joss Mackison
    @jossmac
    hey @neptunian, so the user would pass props to the carousel and consume them in one of the custom components?
    Joss Mackison
    @jossmac
    Regarding composition, components are just functions, so consumers can compose whatever they want. Here's a contrived example:
    import Carousel, { components } from 'react-images';
    
    const Footer = ({ innerProps, isFullscreen }) => (
      <div>
        {isFullscreen ? 'Do something custom' : null}
        <components.Footer {...innerProps} />
      </div>
    )
    
    const App = props => (
      <Carousel
        components={{ Footer }}
      />
    );
    Sandra
    @neptunian
    okay so how would I pass my own props to the Footer component?
    Sandra
    @neptunian
    so for example I've designed my own Footer component and it needs width and height properties to be passed in
    Joss Mackison
    @jossmac
    you would just pass them in as props, right? i think i'm missing something -- could you show me a code example?
    Sandra
    @neptunian
    Sorry this example is a bit different than the one on the v1 site. in this example you are creating a new Footer component and then importing the default one from the library and calling that within the new component?
    Sandra
    @neptunian
    In the App function how would I pass through properties to Footer in the 'components' property and receive them in my Footer function. I'm just not sure how i go about doing that using that object
    Joss Mackison
    @jossmac
    oh, i think we're on the same page now:
    class Footer extends React.Component {
      render() {
        <div>
          <div>{this.props.something}</div>
          <div>{this.props.children}</div>
        </div>
      }
    }
    
    // -------------------------------------
    
    const ActualFooter = ({ something, ...props }) => (
      <Footer something={something} {...props} />
    );
    or more clearly:
    <Carousel components={{ Footer: ({ somethingDynamic, ...props }) => (
      <Footer somethingDynamic={somethingDynamic} {...props} />
    ) }} />
    Sandra
    @neptunian
    oh right, so you can just pass in a function that returns the replacement component into each of those properties. that makes sense.
    Antonov Konstantin
    @rawle51

    hi
    i try to use react-images but have some troubles

    i import Lightbox to my parent and use this to switch pics
    onClickPrev={this.gotoPrevious}
    onClickNext={this.gotoNext}

    but it does not work
    cause i dont have gotoPrevious and gotoNext methods in my parent
    should i write it myself?

    Antonov Konstantin
    @rawle51
    how to swich the images??!?!??!?!?
    Antonov Konstantin
    @rawle51
    catch it
    Joss Mackison
    @jossmac
    Hi Antonov, yes react-images is a controlled component, so you maintain state and just pass it props
    jaapbakker88
    @jaapbakker88
    Hey, I'm trying to use react-images to create an image gallery as a part of a bigger ui library. I'm creating the UI components in styleguidist. Everything seems to be working fine, click image, all the right props get passed, but it seems like the imageLoaded flag doesn't get triggered. And that results in the image not showing up, or any controls, cause it all depends on the imageLoaded. I have the feeling it's related to me using the component in styleguidist because a quick test with a clean app works just fine.
    jaapbakker88
    @jaapbakker88
    So right now the modal opens and then only the loading indicator shows. No errors whatsoever. The image is there with opacity 0. Looking at the sourcecode once it's loaded it should show, but can't find how it's checking to see when it has loaded
    Antonov Konstantin
    @rawle51
    Hi
    i use your lib in modal
    but when i click - slider is not displayed(state - is Open)
    where could be a problem?
    Arjun Biju
    @arjun_biju_gitlab
    hi
    i need to make multiple lightboxes on a page in react js .but the supplied images are only showing on first one
    Michelangelo Partipilo
    @mpartipilo
    @arjun_biju_gitlab Did you find a solution already?
    I ended up using react-id-swiper in a modal