All Projects → pradel → react-google-photo

pradel / react-google-photo

Licence: MIT license
React lightbox component using the google photo style

Programming Languages

typescript
32286 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-google-photo

Natural Gallery Js
A lazy load, infinite scroll and natural layout list gallery
Stars: ✭ 93 (+416.67%)
Mutual labels:  responsive, lightbox
Lity
Lightweight, accessible and responsive lightbox.
Stars: ✭ 1,051 (+5738.89%)
Mutual labels:  responsive, lightbox
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
Stars: ✭ 178 (+888.89%)
Mutual labels:  responsive, lightbox
fancybox
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
Stars: ✭ 7,261 (+40238.89%)
Mutual labels:  responsive, lightbox
Baguettebox.js
⚡ Simple and easy to use lightbox script written in pure JavaScript
Stars: ✭ 2,252 (+12411.11%)
Mutual labels:  responsive, lightbox
Chocolat
Chocolat : the lightbox so cool horses use it 🐴
Stars: ✭ 1,630 (+8955.56%)
Mutual labels:  responsive, lightbox
Glightbox
Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
Stars: ✭ 702 (+3800%)
Mutual labels:  responsive, lightbox
Magnify
🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!
Stars: ✭ 177 (+883.33%)
Mutual labels:  responsive, lightbox
Photoviewer
🌀 A JS plugin to view images just like in Windows.
Stars: ✭ 203 (+1027.78%)
Mutual labels:  responsive, lightbox
hes-gallery
Light, dependency free, responsive gallery script
Stars: ✭ 27 (+50%)
Mutual labels:  responsive, lightbox
react-matchmedia-connect
Higher order components for matchMedia
Stars: ✭ 49 (+172.22%)
Mutual labels:  responsive
hugo-theme-texify
A minimal, latex-style hugo theme for personal blogging
Stars: ✭ 91 (+405.56%)
Mutual labels:  responsive
postcsslayouts
This is the repository for my course, Building a Responsive Single-Page Design with PostCSS on LinkedIn Learning and Lynda.com.
Stars: ✭ 22 (+22.22%)
Mutual labels:  responsive
flutter scale aware
🎗 Scale-based layouts with a bit more ease, powered by extensions.
Stars: ✭ 26 (+44.44%)
Mutual labels:  responsive
vue-responsive-text
↔ Vue component that scales its child node in relation to its parent node's width
Stars: ✭ 23 (+27.78%)
Mutual labels:  responsive
react-aspect-ratio
Preserve space for your element to prevent browser reflow (layout shift)
Stars: ✭ 94 (+422.22%)
Mutual labels:  responsive
guillotine
jQuery plugin to crop images within an area (fully responsive), allowing to drag (touch support), zoom and rotate.
Stars: ✭ 321 (+1683.33%)
Mutual labels:  responsive
soosyze
🌠 Soosyze CMS is a minimalist content management system in PHP, without database to create and manage your website easily. https://soosyze.com
Stars: ✭ 39 (+116.67%)
Mutual labels:  responsive
cookie
Landing website + Blog using Jekyll & Tailwind CSS
Stars: ✭ 61 (+238.89%)
Mutual labels:  responsive
fxp-jquery-sidebar
A responsive and fluid sidebar with jQuery and Hammer.js
Stars: ✭ 14 (-22.22%)
Mutual labels:  responsive

react-google-photo

npm version npm downloads license

react-google-photo is a responsive lightbox React Component for displaying photos that implements the google photo style.

  • Responsive.
  • Keyboard navigation.
  • Easily customizable via props.

Documentation

📚 You can find the docs and live examples here.

Installation

With npm:

npm install react-google-photo --save

Or with yarn:

yarn add react-google-photo

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import 'react-google-photo/styles.css';
import GooglePhoto from 'react-google-photo';

const App = () => {
  const [open, setOpen] = React.useState(false);

const images = [
    {
      src:
        'https://images.unsplash.com/photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 1000,
    },
    ...
  ];

  return (
    <div>
      <button onClick={this.handleOpen}>Open</button>
      <GooglePhoto
        open={open}
        src={images}
        onClose={() => setOpen(false)}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('app'));

Props

Check the documentation: https://react-google-photo.leopradel.com/#props.

License

MIT © Léo Pradel

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].