React Images v1 🎉 #199

jossmac · 2018-01-27T09:02:55Z

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!

The text was updated successfully, but these errors were encountered:

jorrit · 2018-01-28T13:04:12Z

Congrats! Which build systems have you considered so far.

jossmac · 2018-01-28T23:23:35Z

Thanks!

We'll likely port the build system from React Select, which uses Rollup.

NB: Parcel looks promising but may not yet be mature.

jorrit · 2018-02-12T15:31:13Z

It would benefit testing if v1 could be published to npm with a beta or alpha version number and the next tag. See https://docs.npmjs.com/getting-started/using-tags.

codeluggage · 2018-02-17T02:25:11Z

@jossmac Is there a way we can help test this? What is the recommended way to use the v1 branch instead of the npm package, as it stands today?

Super excited about this! 🎉

jossmac · 2018-02-18T23:44:28Z

Update

Checkout the demo site: v1 Demo -->

Alpha releases of react-images@1.0.0-alpha.x available on npm:

yarn add react-images@next

CC @jorrit @codeluggage

benhowell · 2018-02-18T23:49:55Z

Hi @jossmac, I'm not seeing the examples at the bottom of the page...

…

On 19 February 2018 at 10:44, Joss Mackison ***@***.***> wrote: Update Checkout the demo site: v1 Alpha Demo --> <http://bit.ly/react-images-v1> Alpha releases of ***@***.*** available on npm: yarn add ***@***.*** CC @jorrit <https://github.com/jorrit> @codeluggage <https://github.com/codeluggage> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#199 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABs6x80ldn0eJChOs_et_COUk8zXWz0Kks5tWLXcgaJpZM4RvOFb> .

benhowell · 2018-02-18T23:53:20Z

Works ok in Chromium on Linux but not FF. Quick inspection shows that each thumb in the gallery with class .css-1vnvkj1 has a height of zero.

…

On 19 February 2018 at 10:49, Ben Howell ***@***.***> wrote: Hi @jossmac, I'm not seeing the examples at the bottom of the page... On 19 February 2018 at 10:44, Joss Mackison ***@***.***> wrote: > Update > > Checkout the demo site: v1 Alpha Demo --> <http://bit.ly/react-images-v1> > > Alpha releases of ***@***.*** available on npm: > > yarn add ***@***.*** > > CC @jorrit <https://github.com/jorrit> @codeluggage > <https://github.com/codeluggage> > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > <#199 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ABs6x80ldn0eJChOs_et_COUk8zXWz0Kks5tWLXcgaJpZM4RvOFb> > . >

benhowell · 2018-02-18T23:59:30Z

Not proposing this as a solution but I've just hacked it so it works in FF by removing position:absolute; from the image class .css-3c3ju2 (might give you an idea at least)!

…

On 19 February 2018 at 10:53, Ben Howell ***@***.***> wrote: Works ok in Chromium on Linux but not FF. Quick inspection shows that each thumb in the gallery with class .css-1vnvkj1 has a height of zero. On 19 February 2018 at 10:49, Ben Howell ***@***.***> wrote: > Hi @jossmac, > I'm not seeing the examples at the bottom of the page... > > On 19 February 2018 at 10:44, Joss Mackison ***@***.***> > wrote: > >> Update >> >> Checkout the demo site: v1 Alpha Demo --> >> <http://bit.ly/react-images-v1> >> >> Alpha releases of ***@***.*** available on npm: >> >> yarn add ***@***.*** >> >> CC @jorrit <https://github.com/jorrit> @codeluggage >> <https://github.com/codeluggage> >> >> — >> You are receiving this because you are subscribed to this thread. >> Reply to this email directly, view it on GitHub >> <#199 (comment)>, >> or mute the thread >> <https://github.com/notifications/unsubscribe-auth/ABs6x80ldn0eJChOs_et_COUk8zXWz0Kks5tWLXcgaJpZM4RvOFb> >> . >> > >

jossmac · 2018-02-19T12:12:20Z

@benhowell cheers mate, fixed now! glam and flex weren't playing nice.

Also added prop type documentation 💃

michalica · 2018-04-16T12:53:03Z

Wha about this?
const images = [{ src: 'path/to/image-1.jpg', src: 'path/to/image-2.jpg' }];

You define array of images in doc in this way. You duplicate key.

neptunian · 2018-07-19T20:49:10Z

@codeluggage @damienbrz @weslleyaraujo the files should be on NPM now

kachkaev · 2018-07-19T21:10:58Z

@neptunian should the version be 1.0.0-alpha.2 instead of 1.0.1-alpha.1? 🤔

neptunian · 2018-07-20T04:29:50Z

@kachkaev you're right, i'll fix that

kripod · 2018-07-27T15:49:49Z

@neptunian Unfortunately, the lib folder is still not published in 1.0.0-alpha.2.

ArVan · 2018-08-20T16:48:47Z

@neptunian just installed the alpha version and the lib folder is not there.

neptunian · 2018-09-05T19:43:43Z

@ArVan @kripod please use yarn add react-images@next

raRaRa · 2018-09-25T13:24:42Z

I get the following warnings when adding react-images@next:

warning "react-images > react-scrolllock@1.0.9" has incorrect peer dependency "react@^0.14 || ^15.0".
warning "react-images > react-view-pager@0.6.0" has unmet peer dependency "prop-types@^15.5.8".

Have these packages been upgraded recently?

janklimo · 2018-11-21T07:47:24Z

1.0.0-alpha.3 working great for me 👍

kripod · 2018-12-02T16:40:16Z

Unfortunately, SSR is still not working (see #247 for further details).

sergonius · 2018-12-03T06:41:12Z

Ran into the SSR issue with Netlify as well.
The stable version has a nice little canUseDom.

Edit: In the meantime, I just used patch-package to add a few checks in ModalGateway. This seems to work and builds fine, there might be corner cases I am not aware of, though.

Here are the file patch contents:

patch-package
--- a/node_modules/react-images/dist/react-images.es.js
+++ b/node_modules/react-images/dist/react-images.es.js
@@ -1634,6 +1634,7 @@ var ModalGateway = function (_Component) {
           target = _props.target,
           children = _props.children;
 
+      if (!target) return null;
 
       return createPortal(React.createElement(TransitionGroup, { component: FirstChild, children: children }), target);
     }
@@ -1642,7 +1643,7 @@ var ModalGateway = function (_Component) {
 }(Component);
 
 ModalGateway.defaultProps = {
-  target: document.body
+  target: typeof window !== 'undefined' ? document.body : null,
 };
 
 export { ModalGateway, Modal, carouselComponents, modalComponents };

OriAmir · 2019-01-21T08:43:32Z

@jossmac @neptunian what about version 1?there is some plan to release that? it's still 0.5.19 .
still not exist 'swipe' option on mobile on my 'LightBox' , there is some plan for that also ?

tnx!

OriAmir · 2019-01-30T18:18:20Z

@jossmac @neptunian
it's looks like this library will not get support anymore ? no one answer here or on issues...

neptunian · 2019-01-31T01:03:36Z

unless there are any major issues with v1 i'd be happy to release it if @jossmac is okay with it. I'm not sure Flow was the best decision over Typescript for typing but, perhaps that could be changed later. What does everyone think? The only major issue that anyone seems to have brought up is the SSR issue which looks like an easy fix.

iammatthias · 2019-02-01T19:19:34Z

@jossmac @neptunian Will the SSR issue be fixed any time soon? It would be great if v1 could be released with SSR support.

OriAmir · 2019-02-02T22:01:58Z

@jossmac @neptunian Will the SSR issue be fixed any time soon? It would be great if v1 could be released with SSR support.

@iammatthias
I think that right now no one work on this library and the best option is to release v1 and then add improvements .

Maxhou00 · 2019-02-04T06:36:53Z

Is there any plan to released this version ? I feel like nobody is taking care of this library anymore.

OriAmir · 2019-02-04T09:09:26Z

Is there any plan to released this version ? I feel like nobody is taking care of this library anymore.

You right, no one cares about this library.
@jossmac @neptunian If you don't want to support it anymore so give the keys to someone else that want to do that, I maybe can help and I think and also another people can help with that.

neptunian · 2019-02-05T16:08:34Z

@OriAmir There hasn't exactly been any PRs to fix any issues with this so it wouldn't make much of a difference. If someone would like make a PR for the SSR issue, that would be welcome. Otherwise I'll have to get it to when I get a chance which should be soonish!

OriAmir · 2019-02-06T07:06:51Z

@OriAmir There hasn't exactly been any PRs to fix any issues with this so it wouldn't make much of a difference. If someone would like make a PR for the SSR issue, that would be welcome. Otherwise I'll have to get it to when I get a chance which should be soonish!

@neptunian
I think that the best option is firstly to release v1 and then fix the SSR and other issues because the library needs some refresh -there are many issues without replay and any new release not happened in the last 6 months.

iammatthias · 2019-02-06T15:36:45Z

@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.

neptunian · 2019-03-23T22:59:40Z

if you install the latest next version (react-images@next), the SSR issue should be fixed. let me know if there are any issues and then we can see about finally moving to v1!

neptunian · 2019-03-24T15:11:51Z

I want to mention before the release of v1 that I do not plan to maintain v0.x. I can create a branch for it, if anyone else wants to work on it, and accept PRs there.

daydream05 · 2019-03-29T17:08:08Z

@neptunian Thank you for the amazing work! And everyone here as well

jossmac added the v1 label Jan 27, 2018

jossmac mentioned this issue Feb 8, 2018

Swipe with transition #158

Closed

This was referenced Feb 20, 2018

CustomComponents to left & right #213

Closed

Remove Image - Feature #214

Closed

matyasbach mentioned this issue Aug 24, 2018

Pinch to zoom + swipe in gallery matyasbach/ivana-mrazkova#1

Closed

This was referenced Feb 1, 2019

"TypeError: Cannot read property 'path' of undefined" on build (netlify and local) gatsbyjs/gatsby#11464

Closed

"TypeError: Cannot read property 'path' of undefined" on build in Netlify iammatthias/com#25

Closed

This was referenced Mar 19, 2019

[v1] Does it work with SSR? #258

Closed

[v1] Server-side rendering is not working #247

Closed

pauldiloreto mentioned this issue Jun 3, 2019

Feature Request: Ability to use custom Image component #269

Closed

neptunian closed this as completed Jun 11, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Images v1 🎉 #199

React Images v1 🎉 #199

jossmac commented Jan 27, 2018 •

edited by neptunian

jorrit commented Jan 28, 2018

jossmac commented Jan 28, 2018 •

edited

jorrit commented Feb 12, 2018

codeluggage commented Feb 17, 2018

jossmac commented Feb 18, 2018 •

edited

benhowell commented Feb 18, 2018 via email

benhowell commented Feb 18, 2018 via email

benhowell commented Feb 18, 2018 via email

jossmac commented Feb 19, 2018

michalica commented Apr 16, 2018 •

edited

neptunian commented Jul 19, 2018

kachkaev commented Jul 19, 2018

neptunian commented Jul 20, 2018

kripod commented Jul 27, 2018

ArVan commented Aug 20, 2018

neptunian commented Sep 5, 2018

raRaRa commented Sep 25, 2018

janklimo commented Nov 21, 2018

kripod commented Dec 2, 2018

sergonius commented Dec 3, 2018 •

edited

OriAmir commented Jan 21, 2019 •

edited

OriAmir commented Jan 30, 2019

neptunian commented Jan 31, 2019

iammatthias commented Feb 1, 2019

OriAmir commented Feb 2, 2019 •

edited

Maxhou00 commented Feb 4, 2019

OriAmir commented Feb 4, 2019 •

edited

neptunian commented Feb 5, 2019

OriAmir commented Feb 6, 2019

iammatthias commented Feb 6, 2019

neptunian commented Mar 23, 2019 •

edited

neptunian commented Mar 24, 2019

daydream05 commented Mar 29, 2019

React Images v1 🎉 #199

React Images v1 🎉 #199

Comments

jossmac commented Jan 27, 2018 • edited by neptunian

jorrit commented Jan 28, 2018

jossmac commented Jan 28, 2018 • edited

jorrit commented Feb 12, 2018

codeluggage commented Feb 17, 2018

jossmac commented Feb 18, 2018 • edited

Update

benhowell commented Feb 18, 2018 via email

benhowell commented Feb 18, 2018 via email

benhowell commented Feb 18, 2018 via email

jossmac commented Feb 19, 2018

michalica commented Apr 16, 2018 • edited

neptunian commented Jul 19, 2018

kachkaev commented Jul 19, 2018

neptunian commented Jul 20, 2018

kripod commented Jul 27, 2018

ArVan commented Aug 20, 2018

neptunian commented Sep 5, 2018

raRaRa commented Sep 25, 2018

janklimo commented Nov 21, 2018

kripod commented Dec 2, 2018

sergonius commented Dec 3, 2018 • edited

OriAmir commented Jan 21, 2019 • edited

OriAmir commented Jan 30, 2019

neptunian commented Jan 31, 2019

iammatthias commented Feb 1, 2019

OriAmir commented Feb 2, 2019 • edited

Maxhou00 commented Feb 4, 2019

OriAmir commented Feb 4, 2019 • edited

neptunian commented Feb 5, 2019

OriAmir commented Feb 6, 2019

iammatthias commented Feb 6, 2019

neptunian commented Mar 23, 2019 • edited

neptunian commented Mar 24, 2019

daydream05 commented Mar 29, 2019

jossmac commented Jan 27, 2018 •

edited by neptunian

jossmac commented Jan 28, 2018 •

edited

jossmac commented Feb 18, 2018 •

edited

michalica commented Apr 16, 2018 •

edited

sergonius commented Dec 3, 2018 •

edited

OriAmir commented Jan 21, 2019 •

edited

OriAmir commented Feb 2, 2019 •

edited

OriAmir commented Feb 4, 2019 •

edited

neptunian commented Mar 23, 2019 •

edited