Package Exports

@palustris/ra-lightboxgrid
@palustris/ra-lightboxgrid/lib/LightboxGrid.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@palustris/ra-lightboxgrid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`<LightboxGrid>` 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

npm install @palustris/ra-lightboxgrid --save

yarn add @palustris/ra-lightboxgrid

Usage

import {List, ImageField, TextField} from 'react-admin';
import {LightboxGrid} from '@palustris/ra-lightboxgrid;

export const ImageList = props => ( 
    <List {...props}>
        <LightboxGrid rowClick="edit" imageSource="path">
            <ImageField source="thumbnail" title="titel" />
            <TextField source="titel" />
        </LightboxGrid>
    </List>
);

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

@palustris/ra-lightboxgrid