Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meharbhutta/react-fb-collage
Image Grid or Collage component for React
https://github.com/meharbhutta/react-fb-collage
Last synced: about 18 hours ago
JSON representation
Image Grid or Collage component for React
- Host: GitHub
- URL: https://github.com/meharbhutta/react-fb-collage
- Owner: meharbhutta
- License: mit
- Created: 2023-08-18T17:12:55.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-20T13:44:45.000Z (about 1 year ago)
- Last Synced: 2024-11-09T20:54:29.243Z (8 days ago)
- Language: TypeScript
- Size: 627 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# react-fb-collage
Image Grid or Collage component for React
## NPM
- stable release version: 
- package downloads: 
- [](http://opensource.org/licenses/MIT)
## Show Case
## Getting Started
### Installation
```bash
npm i react-fb-collage --save
```
### Basic Usage
- Initialization of a react project
```bash
$ npx create-react-app AwesomeProject
```
### Note: [GUIDE](https://create-react-app.dev/docs/getting-started)
- Then, `cd AwesomeProject`
- Install library
```bash
$ npm i react-fb-collage
```
- Then, edit `AwesomeProject/App.js`, like this:
```typescript
import React from "react";
import FBCollage from "react-fb-collage";
function App() {
const images = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
"https://upl/oad.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
];
return (
);
}
export default App;
```
### Props
| parameter | type | required | description | default |
| :--------------------- | :------------------------------------------------------------------------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------- |
| images | array | yes | The array of image sources of
require('../image-file')
or
'imageURL'
or
both | |
| imageOnPress | function
`(index, images) => void` | no | The callback for image on press listener | `() => {}` |
| width | number | no | The width of the view | `357` |
| height | number | no | The height of the view | `200` |
| borderRadius | number | no | The border radius of the images | `12` |
| spacing | number | no | The spacing between the images and the view | auto |
| style | object | no | To override the main view style | default |
| overlayStyle | object | no | To override the text view overlay style | default |
| textStyle | object | no | To override the text style | default |
## Development pattern
### Step 1,
After clone this repo, then:
```bash
cd react-fb-collage
```
### Step 2,
```bash
npm install
```
### Step 3, choose demo
```bash
cd demo
```
### Step 4, run demo
```bash
npm install
npm start
```
#### In case of any issue follow the [GUIDE](https://facebook.github.io/react-native/docs/getting-started).
### Supported React Versions
This project aims to support any version of React.
If you require new features or bug fixes for older versions you can fork this project.
### Credits
The idea for this modules came from facebook collage.
### Licenses
FBCollage - MIT © MeharBhutta