UNPKG

react-native-hook-image-slider

Version:
54 lines (39 loc) 2.12 kB
# React Native Hook Image Slider Light and bare minimum image slider for React Native. Written in TypeScript with React functional components and hooks. --- ![SliderBox](docs/assets/preview.gif) ## Install `npm i react-native-hook-image-slider` or `yarn add react-native-hook-image-slider` ## Props | Prop | Type | Description | Required | Default | | ---------------------------- | ---------- | ----------------------------------------------------------- | -------- | -------------- | | **`images`** | `string[]` | Image source (either a remote URL or a local file resource) | `Yes` | None | | **`imageHeight`** | `number` | Image height in px | `No` | 300 | | **`loadingIndicatorColour`** | `string` | Color of loading indicator(image placeholder) | `No` | '#000' (black) | | **`separatorWidth`** | `number` | Width of the separator between images | `No` | 0 | | **`separatorColor`** | `string` | Separator color (only if separatorWidth > 0) | `No` | '#FFF' (white) | | **`activeDotColor`** | `string` | Color of active pagination dot | `No` | '#000' (black) | | **`emptyDotColor`** | `string` | Color of inactive pagination dot | `No` | '#FFF' (white) | ## Quickstart ```javascript import * as React from "react" import { View } from "react-native" import Slider from "react-native-hook-image-slider" const Component = () => { return ( <View> <Slider images={[ "./images/you_are_awesome.jpeg", "https://yourCDNLink.com/cat.jpeg", "home/project/profits/spreadsheet.jpeg", ]} /> </View> ) } ``` ## Contribution All contributions are welcome. If you need any feature hit me up with feature request or do it yourself and prepare a merge request with a descriptive name.