https://github.com/steenhansen/react-hover-grid

Hovering text gallery component for React that automatically resizes images
https://github.com/steenhansen/react-hover-grid

javascript jsx react server-side-rendering unassert

Last synced: about 2 months ago
JSON representation

Hovering text gallery component for React that automatically resizes images

• Host: GitHub
• URL: https://github.com/steenhansen/react-hover-grid
• Owner: steenhansen
• License: mit
• Created: 2017-09-02T01:04:00.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-14T22:31:29.000Z (10 months ago)
• Last Synced: 2024-03-14T23:36:54.316Z (10 months ago)
• Topics: javascript, jsx, react, server-side-rendering, unassert
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-hover-grid
• Size: 318 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        






![visual explanation](https://github.com/steenhansen/react-hover-grid/blob/master/react_hover_grid.jpg)

An automatic re-sizing React image gallery component with hovering capabilities. [Server side rendering](https://react-hover-grid.onrender.com/ssr-no-js) is also possible. No need to enter images dimensions as Gulp re-sizes images for you. Can also work [inside a react-split-pane](https://react-hover-grid.onrender.com/resizable-splitter) component, or be contained in a div [which changes size](https://react-hover-grid.onrender.com/shrink-grow) via events.

Live [react-hover-grid examples](https://react-hover-grid.onrender.com/), takes 150sec to start on free hosting.

Full [webserver with examples](https://github.com/steenhansen/react-hover-grid-examples) on GitHub

[react-hover-grid](https://www.npmjs.com/package/react-hover-grid) package on npm

## Install

$ npm install react-hover-grid --save

$ npm install --global gulp-cli

## Compile

$ gulp

### [Types](/readme_types.md)

### [ReactHoverGrid Class](/readme_ReactHoverGrid.md)

### [PictureTile Class](/readme_PictureTile.md)

### [Sample Illustration](/readme_sample.md)

## Attribution

- This project is a spruced up copy of [https://github.com/benhowell/react-grid-gallery](https://github.com/benhowell/react-grid-gallery) which can be seen in action here [https://benhowell.github.io/react-grid-gallery/](https://benhowell.github.io/react-grid-gallery/)

## Created by  

[Steen Hansen](https://github.com/steenhansen)

## License

MIT ©