Skip to content

minsour/react-key-move-list-view

Repository files navigation

React KeyMoveListView

Carousel, Matrix Component operated by Keyboard Input (←, ↑, →, ↓)

💽 Intro

SlideView

slideview

MatrixView

matrixview

SlideView - Container

slideview-container

MatrixView - Container

matrixview-container

Demo in Storybook

🌟 Major Component

  • SlideView
  • MatrixView
  • ListView
  • ViewContainer

🔨 Built With

  • TypeScript
  • React
  • Sass

⚙️ Installation

npm i react-key-move-list-view
# or
yarn add react-key-move-list-view

🔍 Examples

Sample Keyboard Move List

import * as React from 'react';
import { ListView } from 'react-key-move-list-view';

const KeyboardListViewExample = () => {
  return (
    <ListView list={data} type="slide"/>
    // or 
    <ListView list={data} type="matrix"/>
  )
}

You can find more Examples and Demo in Storybook

🖥 Local Development

This component is managed by a storybook which is combined with develop environment and documentation. If you want to develop in local environment, clone project and develop through a storybook

git clone https://github.com/DevSoopark/react-key-move-list-view.git
yarn
yarn run storybook

🗝 License

MIT

About

React KeyMoveListView(Carousel, Matrix) Library https://https://minsour.github.io/react-key-move-list-view/

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published