react-capsules v1.1.1

react-capsules-lib

A plug & play api for bullet lists in React with Dnd feature.

Install

npm install --save react-capsules

Components and props

Main Components

1. ReactBulletDnd
2. ReactBulletDnd.Item
3. ReactBulletDnd.TextInput

Usage

import React, { useState } from 'react'

import ReactBulletDnd from 'react-capsules'
import 'react-capsules-lib/dist/index.css'
import cancel from './cancel.png'

const App = () => {
  const [items, setItems] = useState([
    'Android development',
    'React Js',
    'MongoDb',
    'MySql Programming',
    'Node Js',
    'JavaScript',
    'Firebase'
  ])

  const onItemAdded = (item) => {
    const copyItems = JSON.parse(JSON.stringify(items))
    copyItems.push(item)
    setItems(copyItems)
  }

  return (
    <div className='App'>
      <ReactBulletDnd data={items} set={setItems} style={/* Container Style */}>
        {items.map((item, index) => (
          <ReactBulletDnd.Item
            item={item}
            key={index}
            position={index}
            style={/* Item style */}
            icon={cancel}
          />
        ))}
        <ReactBulletDnd.TextInput
          style={/* Input style */}
          addItem={onItemAdded}
        />
      </ReactBulletDnd>
    </div>
  )
}

export default App

License

MIT © Gaurav2048