React Images v1 🎉

For the past few months I’ve been rewriting react-images from the ground up. Having solidified some of the core concepts, i’d really like to hear your thoughts 🙂

Check out the v1 branch -->

The main impetus for rewriting this library was providing consumers with the building blocks necessary to create their component. Need extra buttons in the header? No problem, import react-images’ <Header /> component and enhance it. Need to render videos rather than images? No problem, replace the <View /> component and pass the data required to the views property.

General notes:

• At the moment the v1 branch is just a create-react-app until we decide on a build setup
• Much of the state is now internal, simplifying implementation for the consumer
• This project now leverages the amazing react-view-pager, which takes care of the touch/swipe boilerplate via react-motion
• A great deal of the component architecture has come from recent R&D with @JedWatson for version two of react-select

Features of v1:

• 🛠   Comprehensively typed (flow)
• 📱   Support for touch devices
• 📺   Fullscreen support on desktop devices
• 🖼   Carousel without modal dialog
• 🏖   No restrictions on data shape
• 🚀   Replaceable component architecture

Many of the requirements, issues, and feature requests should be addressed by the new customisable component architecture without requiring changes to the core.

What this means for v0.x

No need to worry. I, together with @neptunian (the primary maintainer, who’s doing an amazing job!), will continue to release critical bug fixes. We won’t however be implementing enhancements or new features unless provided in a rock-solid PR.

The new API is a massive departure from v0.x, so there won’t be an “upgrade guide” as such. I’ll endeavour to provide a handful of examples to cover most use-cases and welcome anyone else to do the same.

Still left to do:

• settle on and implement a build tool
• unit tests for each component
• integration tests for carousel/modal
• lockdown the API and release an alpha
• light-weight theming/styling for components
• add classnames for those who prefer styling with CSS
• default components implement ARIA best practices

I’d like to thank everyone who has contributed to this project over the years, without your support react-images wouldn’t be where it is today. Cheers to the open source community 💖

Looking forward to your feedback!

[iammatthias]

@oriamir the SSR issue affects a lot of people who might use this library, considering how popular frameworks like Gatsby are becoming.

If you want the current version released as a V1, what’s stopping you from using the alpha? Changing it from alpha to V1 doesn’t make any functional difference.

Give the maintainers time to do their thing and live their lives. The great thing about this project being open-source is that nothing is stopping you from submitting a PR that fixes what you perceive to be an issue.

@neptunian, thanks for the work you’ve put into this.

[weslleyaraujo]

yarn add react-images@next is currently failing for me 😩

Module not found: Can't resolve 'react-images' in '...'

Looking at node_modules/react-images/package.json I got

{
  "version": "1.0.0-alpha.1",
  "main": "lib/index.js",
  "jsnext:main": "dist/react-images.es.js",
  "module": "dist/react-images.es.js",
}

There is no lib or dist directory, only src is there… maybe something is missing on the publish script?