react-slade

Slideable react dialog of iterable component.

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

name	type	description	is required
open	boolean	defines the state when the Slade is open or not	true
items	array	array of Component that will be slide-able	true
index	int	defines which Component is showed when the open become true	true
closeSlade	function	close active Slade with change the open to false	true
nextSlade	function	increment current index of Slade	true
previousSlade	function	decrement current index of Slade	true
backdrop	string	predefined color like red, rgb/rgba and hsl/hsla like rgba(0,0,0,0.5), or image url like https://example.com/bg.png/	false
rightArrow	string or svg	svg component (100 x 60) or image url like https://example.com/arr.png/. If you change right arrow, all arrow will automatically changed and got rotated	false

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