1.5.0 • Published 6 years ago

react-slade v1.5.0

Weekly downloads
4
License
MIT
Repository
github
Last release
6 years ago

react-slade

style: styled-components

Table of Contents

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

nametypedescriptionis required
openbooleandefines the state when the Slade is open or nottrue
itemsarrayarray of Component that will be slide-abletrue
indexintdefines which Component is showed when the open become truetrue
closeSladefunctionclose active Slade with change the open to falsetrue
nextSladefunctionincrement current index of Sladetrue
previousSladefunctiondecrement current index of Sladetrue
backdropstringpredefined 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
rightArrowstring or svgsvg 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 rotatedfalse

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

1.5.0

6 years ago

1.4.19

7 years ago

1.4.18

7 years ago

1.4.17

7 years ago

1.4.16

7 years ago

1.4.15

7 years ago

1.4.14

7 years ago

1.4.13

7 years ago

1.4.12

7 years ago

1.4.11

7 years ago

1.4.10

7 years ago

1.4.9

7 years ago

1.4.8

7 years ago

1.4.7

7 years ago

1.4.6

7 years ago

1.4.5

7 years ago

1.4.4

7 years ago

1.4.3

7 years ago

1.4.2

7 years ago

1.4.1

7 years ago

1.4.0

7 years ago

1.3.0

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.0

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.3.2

7 years ago

0.3.0

7 years ago

0.2.0

7 years ago

0.1.0

7 years ago

0.0.24

7 years ago

0.0.23

7 years ago

0.0.22

7 years ago

0.0.21

7 years ago

0.0.20

7 years ago

0.0.19

7 years ago

0.0.17

7 years ago

0.0.16

7 years ago

0.0.15

7 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.12

7 years ago

0.0.11

7 years ago

0.0.10

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago