react-intro-slider

Easy-to-use yet very configurable app introduction slider

Quick Start

npm i react-intro-slider --save

Demo

Try it online

Table of contents

• Props and options
  • Configure behaviour
  • Configure looks
  • Methods
• Example

Props and options

Configure looks

Name	Type	Default	Description
size	string	medium	Size of slider. Possible values: small, medium,large,fullscreen
titleStyle	string	null	Styling for slide title
imageStyle	string	null	Styling for slide image
descriptionStyle	string	null	Styling for slide description
skipButtonStyle	style	null	Styling for skip button
nextButtonStyle	style	null	Styling for next button
controllerActiveIconStyle	style	null	Style of active pagination dots
controllerInactiveIconStyle	style	null	Style of inactive pagination dots
sliderStyle	style	null	Style of slider container
slideStyle	style	null	Style of slide
nextLabel	string	NEXT	Label of next button
skipLabel	string	SKIP	Label of skip button
doneLabel	string	DONE	Label of done button
controllerIconActive	node	null	Custom active icon
controllerIconInactive	node	null	Custom inactive icon

Configure behavior

Name	Type	Default	Description
slides	array	No default, required	An array of objects
skipButton	boolean	false	Enable to show a skip button to the left of pagination dots
nextButton	boolean	true	Disable to hide the next button
closeOnOverlayClick	boolean	true	Disable to keep slider open
controllerOrientation	string	vertical	Orientation of the control buttons. Possible values: vertical,horizontal
sliderIsOpen	boolean	false	Enable to show slider

Methods

Method Name	Description
handleDone	Callback function triggered when user presses done
handleClose	Callback function triggered when slider closes because of overlay click or skip button press

Example

You can run the example Expo-app by cloning the repo:

git clone https://github.com/dimitamp/react-intro-slider.git
cd react-intro-slider
npm install
npm start