gatsby-tag-slider

Tag Slider for React

Install

npm install --save gatsby-tag-slider

Usage

Setting

• tags : Tag Slider Data Go
• selectHandle : Handle Select Event

Data

const tags = {
  'react': {
    id: 'react',
    name: 'react',
    selected: false
  },
  'network': {
    id: 'network',
    name: 'network',
    selected: false
  },
  'es3': {
    id: 'es3',
    name: 'es3',
    selected: false
  },
  'java': {
    id: 'java',
    name: 'java',
    selected: false
  },
  'sprint': {
    id: 'sprint',
    name: 'sprint',
    selected: false
  },
  'vue': {
    id: 'vue',
    name: 'vue',
    selected: false
  },
  'js': {
    id: 'js',
    name: 'js',
    selected: false
  },
  'es5': {
    id: 'es5',
    name: 'es5',
    selected: false
  },
  'tdd': {
    id: 'tdd',
    name: 'tdd',
    selected: false
  }
}

JSX

import React, { Component } from 'react'
import TagSlider from 'gatsby-tag-slider'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      tags
    }
  }

  selectHandle = (id) => {
    this.setState((prevState) => {
      return {
        ...prevState,
        'tags': {
          ...prevState.tags,
          [id]: {
            ...prevState.tags[id],
            selected: !prevState.tags[id].selected
          }
        }
      }
    })
  }

  render() {
    return (
      <div className={'outerDiv'}>
        <TagSlider tags={this.state.tags} selectHandle={this.selectHandle}/>
      </div>
    )
  }
}

Demo

Click me

Sliding

Sliding Way

1. Click & Move
2. Scrolling

License

MIT © seonhyungjo