react-native-insta-pagination-dots

esm
Instagram like carousel pagination dots with React Native
Version 1.0.5 License ISC
Keywords
react-nativecarousel-paginationdot-paginationinatagram-like-paginationinsta-dotsinsta-carousel-pagination
<script type="module"> import reactNativeInstaPaginationDots from 'https://cdn.jsdelivr.net/npm/react-native-insta-pagination-dots@1.0.5/+esm' </script>
react-native-insta-pagination-dots
Instagram Like dot pagination component for React Native
Installation
Installation can be done through npm
:
npm
npm i react-native-insta-pagination-dots
yarn
yarn add react-native-insta-pagination-dots
Usage
You can easily add to your project.
just import component and set current page index and max page index.
import React from 'react'
import {View} from 'react-native'
import PaginationDot from 'react-native-insta-pagination-dots'
const ExampleDotPaginate:React.FC = ()=>{
const [curPage] = React.useState(0);
return (
<PaginationDot
activeDotColor={'black'}
curPage={curPage}
maxPage={20}
/>
)
}
export default ExampleDotPaginate;
Example

API
Props
Prop | Type | Required(Default Value) | Description |
---|---|---|---|
curPage |
number |
required | Pagination curernt Page |
maxPage |
number |
required | Total Page in Pagination |
activeDotColor |
string |
required | Active Dot Color. dot will control by opacity |
inactiveDotColor |
string |
undefined | InActive Dot Color. dot will control by opacity |
sizeRatio |
number |
1.0 | Customize Dot Size. minimum value is 1.0 (recommend 1.0 ~ 2.0) |
vertical |
boolean |
false | Dot direction |
Contributing
License
MIT.
Author
shubh