https://github.com/gartner/palustris-ra-lightbox

A Datagrid-component for React-admin, that wraps all images in a lightbox.
https://github.com/gartner/palustris-ra-lightbox

Last synced: 3 months ago
JSON representation

A Datagrid-component for React-admin, that wraps all images in a lightbox.

• Host: GitHub
• URL: https://github.com/gartner/palustris-ra-lightbox
• Owner: gartner
• License: mit
• Created: 2019-02-04T06:51:53.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-27T11:41:51.000Z (about 2 years ago)
• Last Synced: 2024-10-11T10:55:59.277Z (4 months ago)
• Language: JavaScript
• Size: 340 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `` for react-admin

 component for react-admin, that will add a Lightbox to all imagefields in the grid.

It will wrap a click-handler on all the images in the list, which will open the Lightbox. It returns just a DataGrid for the list.

## Installation

```sh

npm install @palustris/ra-lightboxgrid --save

```

or 

```sh

yarn add @palustris/ra-lightboxgrid

```

## Usage

```js

import {List, ImageField, TextField} from 'react-admin';

import {LightboxGrid} from '@palustris/ra-lightboxgrid;

export const ImageList = props => ( 

    

        

            

            

        

    

);

```

The LightboxGrid takes all the props that a Datagrid does. It requires one prop for its own use: 'imageSource'. This is the field from the resource-record, that gives the url to the fullsize image to display.

(In my use case, the api return a url for both a thumbnail and the full size image. I display the thumbnail in the Datagrid, and the full size image in the Lightbox).

## License

This library is licensed under the [MIT Licence](LICENSE)