https://github.com/temmiland/react-expandable-grid
A React grid component with an expanding detail view 🖥️
https://github.com/temmiland/react-expandable-grid
expandable gallery grid portfolio preview react responsive
Last synced: 2 months ago
JSON representation
A React grid component with an expanding detail view 🖥️
- Host: GitHub
- URL: https://github.com/temmiland/react-expandable-grid
- Owner: temmiland
- License: mit
- Created: 2024-02-16T21:18:21.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-06T09:17:14.000Z (over 1 year ago)
- Last Synced: 2025-09-18T10:59:29.833Z (4 months ago)
- Topics: expandable, gallery, grid, portfolio, preview, react, responsive
- Language: TypeScript
- Homepage: http://demo.temmi.land/react-expandable-grid/
- Size: 4.19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-expandable-grid - [](https://www.npmjs.com/package/@temmiland/react-expandable-grid)
react-expandable-grid is a simple-to-use component designed to create grids with an expanding detail view. It provides an easy solution for quickly setting up galleries and portfolios in your React applications. With this component, when a user clicks on an element of your choice, a preview window opens up, displaying a larger (or smaller, depending on the settings) area where you can customize and showcase your content as desired.
Trying it out is always simpler than just reading about it. Take a look at the demo!
## Demo
You can reach the Demo here: [`https://demo.temmi.land/react-expandable-grid`](https://demo.temmi.land/react-expandable-grid)
To try it locally, run:
```bash
git clone git@github.com:temmiland/react-expandable-grid.git
cd react-expandable-grid
bun i
bun run dev
```
Then open [`localhost:6006`](http://localhost:6006) in a browser.
## Installation
A straightforward method for using react-expandable-grid involves installing it from the NPM registry and integrating it into your React build process.
```bash
bun i @temmiland/react-expandable-grid
# or for those living under a rock :D
npm i @temmiland/react-expandable-grid
pnpm i @temmiland/react-expandable-grid
yarn i @temmiland/react-expandable-grid
```
## Usage
```javascript
(15).fill({
expandableElement: ({ currentIndex }) => (
{ 'Expandable ' }
{ currentIndex }
),
expandedElement: ({ currentIndex, close }) => (
{ 'Expanded ' }
{ currentIndex }
{ 'Close' }
)
}) }
expandableElementWidthInPx={ 300 }
fbJustifyContent='space-between'
defaultSelectedIndex={ 0 }
/>
```
### Properties
| Property | Type | Explanation | Notes |
| --------------------------- | --------------------------- | ---------------------------------------------- | ------------------------------------------------------- |
| elements | `Array` | The list of expandable elements. | |
| expandableElementWidthInPx | `number` | The width of one expandable element. | `px` |
| fbJustifyContent | `string` | The mode for the CSS property justify-content. | one of: `space-between \| space-around \| space-evenly` |
| defaultSelectedIndex | `number` | Default selection of an element with an index | starts at 0 |
### Notes
#### Default values
```javascript
fbJustifyContent = 'space-between'
```
## Development (`src`, `lib` and the build process)
**NOTE:** The source code for the component is in `lib`.
To build, watch and serve the examples (which will also watch the component source), run `bun run dev`.
## License
### (MIT License)
```text
Copyright 2024 Temmi Pietsch
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the “Software”), to deal in
the Software without restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
```