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

| Components | Api | Description | Required | | | ------------------------ | -------- | --------------------------------------------------- | -------- | --- | | ReactBulletDnd | data | Pass the data to be displayed in capsules | false | | | | set | hook that changes the data | false | | | | style | Style for the component | false | | | | | | | | | ReactBulletDnd.Item | item | Text to display on every capsule | true | | | | position | Index of the item in the array to add dnd feature. | false | | | | style | Style for the capsule | false | | | | icon | Icon for the cancel button. | false | | | | | | | | | ReactBulletDnd.TextInput | style | Style for the input | false | | | | addItem | callback when enter is pressed for adding new data. | true | | | | | | | | | | | | | |

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