score:2
so from the link:
<lightbox
images={[
{ src: '../images/photo-1.jpg' },
{ src: '../images/photo-2.jpg' }
]}
isopen={this.state.lightboxisopen}
onclickprev={this.gotoprevlightboximage}
onclicknext={this.gotonextlightboximage}
onclose={this.closelightbox}
/>
lightbox is the name of a react component. so you need to import it: import lightbox from 'react-images';
images, isopen, onclickprev, onclicknext, onclose are props for this components. these are special names defined by the component. brackets on the left hand side are indicating that you are writing javascript. {this.state.variable} makes reference to a component state, a state that you have to define in the component you are making (galery for example). {this.myfunction} points to a function called 'myfunction' on gallery. so you have to define those functions in your component.
this is just a snapshot. i dug a little bit and found a complete example on the github page of the project. here.
you can clone the repo and run this example locally. but i'd suggest you to use the create-react-app start a new app, and paste the code from the link (galery component) into your default app component, and try to make it work, and then tweak.
if none of this make sense to you, you probably have a mountain to climb called 'learning reactjs library'.
good luck.
Source: stackoverflow.com
Related Query
- Destructuring props in React -> need help understanding how it works in my particular case
- How to play video in react image gallery when clicked for e-commerce project? Need to play video in the carousel itself
- Need an explaination to how react-image works
- How to import image (.svg, .png ) in a React Component
- How to set image width to be 100% and height to be auto in react native?
- How do I add color to my svg image in react
- How to give Image src dynamically in react js?
- How Snapshot testing works and what does toMatchSnapshot( ) function do in Jest Snapshot testing for React components?
- How to upload an image in React JS?
- How to disable image fade in effect in React Native?
- How can I repeat a pattern image to create a background in React Native?
- How to add image in react by using parcel?
- React Native - How to load local image using the uri in Image Component?
- React Native How to LazyLoad image
- How does React router works and what is the difference between <link> and<Route>
- How to preload image in a React JS component?
- How to getByRole a button with image in React Testing Library
- How to display every image inside an image folder in react
- How to create a simple spinning animation for an image in React
- How to reference image in React Component NPM module?
- React how to remove listners correctly in componentWillUnmount, why do I need the bind in the constructor?
- In react native, how to convert a base64 image to jpg then save to temp path?
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- How to detect area tag onClick in a Image Map in React
- How to pass image url as prop in React
- How to paste image into CKEditor5 in React using Base64UploadAdapter
- How to make shaking image animation in React Native?
- how to change image src using props with styled component and react
- How to display an image saved as blob in React
- React useCallback with debounce works with old value, how to get actual state value?
More Query from same tag
- Why is React Toastify is Display HTML text
- How to pass event from component to nested function?
- Converting a class component to a functional one
- create a new array from a filtered map in react js
- getting value immediately after useState in react
- <Component {...{myProp : this.props.myProps}} /> vs <Component myProp={this.props.myProps} />;
- How do I route my button to another page using react-router-dom?
- Failed to iterate data with React
- ReactJS and how to reuse shared components
- React hooks doesn't re render component when props changes
- Reset Redux state to undefined or initial state except one state
- How to make controlled input using redux-form?
- Multiple React Context: inner one depending on outer one doesn't work
- Is it necessary to `window.removeEventListener('unload')`?
- When I try to rename a favicon in a react project to "favicon.ico" the icon changes to react logo
- Interactive Form for math
- React control the order of text inputs in a form
- Get path params in react-router v4
- react input chnage default value using hooks
- Updating state arrays with React Hooks
- How do I use the type of imported JSON file in TypeScript
- Http Request is getting executed multiple times
- Use react proptypes for validation in purely functional code
- TextField doesn't render when fullWidth is true
- Prevent duplicates from json array with reactjs and axios
- Error: Expected undefined to be a GraphQL schema
- Is it possible to concatenate an img src in React?
- How to properly set colors on certain elements in Material-ui?
- Audio file not playing - HowlerJS
- Trying to use react-papaparse to stream a local file row by row but it's not working - am I coding it correctly or is it just not possible?