react-slade v1.5.0

react-slade

Table of Contents

• Examples
• Installation
• API Documentation
• Usage
• FAQ

Examples

react-slade examples page

you can try live example above here

Installation

To install, you can use npm and yarn :

$ npm install react-slade
or
$ yarn add react-slade

API Documentation

Usage

This is example of basic usage

import React, { Component } from 'react'
import Slade from 'react-slade'

import Container from '../components/Container'
import Button from '../components/Button';
import Image from '../components/Dummy/Image'

class Home extends Component {
  state = {
    open: false,
    index: 0,
    items: [ 
      <Image src= "url1" />,
      <Image src= "url2" />,
      <Image src= "url3" />
    ]
  }

  openSlade = () => {
    this.setState({ open: true })
  }

  closeSlade = () => {
    this.setState({ open: false })
  }

  nextSlade = () => {
    this.setState({ index: this.state.index + 1 })
  }

  previousSlade = () => {
    this.setState({ index: this.state.index - 1 })
  }

  render() {
    return (
      <Container>
        <Slade 
          items={this.state.items} 
          open={this.state.open} 
          index={this.state.index} 
          closeSlade={this.closeSlade}
          nextSlade={this.nextSlade}
          previousSlade={this.previousSlade} 
        />
        <Button onClick={this.openSlade}>Show Dialog</Button>
      </Container>
    )
  }
}

FAQ

Q: I got an error when import from local file, for example arrow={'./myArrow.svg'}

A: Ups, sorry this library not supported that feature yet. Feel free to do pull request

Q: Are we still need media queries for component that we passed?

A: For best result you must define it by yourself though (i believe in flexibelity)

Q: I think props like nextSlade and previousSlade is redundant, why not try to remove that item?

A: Again, I believe in flexibelity. You can put your extra feature there. For example you can add confetti when user reach end of slade, or you can disable user to change Slade before doing something, etc