score:0
i believe you need isopen
. try
return (
<lightbox
isopen
images={images}
onclose={this.onclose}
onclickprev={this.gotoprevious}
onclicknext={this.gotonext}
/>
);
score:3
it is not obvious from the documentation, but react-images will not render a grid/or a gallery of your images. it will only render the lightbox component once a image is clicked.
so, in order to get what you want (which is a gallery of some kind, and the light box component applied to images of that gallery, then you need more than just 'react-images'. you can render the images on their own, or with another gallery/grid npm library.
for example you can render an array of images with just the normal <img>
tag. but, be sure that each image has the "onclick" set to be a function that opens the lightbox. see below:
...
<grid imagesarray={thumbs} onclick={this.openlightbox.bind(this)} columns={3} padding={3} />
<lightbox
images={images}
isopen={this.state.lightboxisopen}
onclickprev={this.gotoprevious}
onclicknext={this.gotonext}
onclose={this.closelightbox}
currentimage={this.state.currentimage}
/>
Source: stackoverflow.com
Related Query
- Cant use Hooks with my React Component Library. Invariant Violation: Invalid hook call
- Testing images imported in the component with Jest + React Native
- How to get Emotion styled component in a React project to work with TypeScript?
- Converting React class with "static get defaultProps()" to functional component
- Why child component didnt get parent's props with Axios in React
- How to get Emotion/Rollup/Typescript component CSS to show up in consuming React app?
- Embedded child component doesn't get changed when I click a new one with React Router
- React and Google Maps with google-maps-react, cant get to API's methods
- how to get images from mongo with axios and display them with react
- How to get http header(LDAP user attribute set by Nginx) with React component
- How do I get my images to show up in my React component?
- How do I get browser Autofill values to show up in my serialized React `Field` component data?
- can't get component to show up with react-images?
- How to get handle on current object with a React function component
- how to get, by a get from axios, data in useState with react functionnal component
- How to get a component to be fixed at the bottom until the user scrolls to the footer with CSS in React
- Display images with a loop in a React component
- Working example for Graph Toolkit using SharePoint spfx, React and Get component with template
- SharePoint Framework with React Component loading images
- onChange antd Input component doesn't setState (hook) properly with list from axios get in React
- Trying to add Scss to a React project built with Webpack but I cant get it working
- How to convert a React class component to a function component with hooks to get firebase data
- Get live updated data with ajax in a react component
- React component props don't get updated with redux store
- Custom React component doesn't show input length when used with react-hook-form
- Hide Show component and highlight link with react scroll
- Get errors when I try to set ref in react component with typescript
- Using Cloudinary React Component with Bootrap React for Images
- Dev tools show many websocket requests of chat app built by react hook with functional component
- Create temp file and get file with axios in React and show download pop up
More Query from same tag
- Why jest.spyOn does not find my component function?
- onkeypress doenst work properly on react?
- Module not found Error when deployed on Heroku
- My React component is re-rendering, cannot figure out why
- Is the web.config file required for a Node/Next/React App running on Azure App Service (Linux)?
- useQuery returns undefined, But returns data on gql playground
- Jest simulate not showing text on textbox
- Uncaught Error: "category" is not a registered scale
- 'Event' is not assignable to parameter of type 'WheelEvent<Element>'
- Changing the theme color value from user input on button click using ThemeProvider
- React Router: Call component function on RouteHandler ref
- ReduxThunk How do I pass action data to the original state?
- Show hide multiple elements with react
- How can I access state of another slice in redux with redux-toolkit?
- React frontend, node backend CORS issue
- Any example for gantt chart using d3.js in react.js either with d3.js or react.js approach?
- getting errors in retrieving information through inputs
- Socket not emit messages
- Multiple panels open and close at one click - Ant Design Collapse
- How setup react-helmet with Server Side Rendering?
- How to add props like fullWidth at particular width like 'sm' in Material UI React
- Keep updating markers on map on top of an overlay image - google maps react
- Attempting to set the state of an array in ReactJS but not sure how to map over
- setState => Dont spread array if empty - React
- Use assignable type for RefObject in React with Typescript
- How to tab past closed modal links? #a11y
- how do I initialize two Draftjs editor on same page?
- Add image files into react state using 'useState'
- Safari onClick event to focus() not working in React
- React Google Charts Candlestick colors and wicks not displaying