Git Product home page Git Product logo

react-images's Introduction

React Images

A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS.

Getting Started

Start by installing react-images

npm install react-images

or

yarn add react-images

If you were using 0.x versions: library was significantly rewritten for 1.x version and contains several breaking changes. The best way to upgrade is to read the docs and follow the examples.

Using the Carousel

Import the carousel from react-images at the top of a component and then use it in the render function.

import React from 'react';
import Carousel from 'react-images';

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

class Component extends React.Component {
  render() {
    return <Carousel views={images} />;
  }
}

Using the Modal

Import the modal and optionally the modal gateway from react-images at the top of a component and then use it in the render function.

The ModalGateway will insert the modal just before the end of your <body /> tag.

import React from 'react';
import Carousel, { Modal, ModalGateway } from 'react-images';

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

class Component extends React.Component {
  state = { modalIsOpen: false };
  toggleModal = () => {
    this.setState(state => ({ modalIsOpen: !state.modalIsOpen }));
  };
  render() {
    const { modalIsOpen } = this.state;

    return (
      <ModalGateway>
        {modalIsOpen ? (
          <Modal onClose={this.toggleModal}>
            <Carousel views={images} />
          </Modal>
        ) : null}
      </ModalGateway>
    );
  }
}

react-images's People

Contributors

jossmac avatar neptunian avatar jedwatson avatar gregorypotdevin avatar ko avatar robintail avatar shmuga avatar kripod avatar mkalygin avatar rogach avatar newsiberian avatar pradel avatar lkazberova avatar jorrit avatar indreklasn avatar archr avatar seanpascoe avatar rvidis avatar hiyamamo avatar dibenso avatar gitter-badger avatar pleunv avatar thepatrik avatar josh-a-e avatar nickhsu avatar flode avatar djkirby avatar ffdanielfischer avatar benhowell avatar aknuds1 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.