mimi-packetolo

mimi-packetolo

A React component for creating comment inputs with user tagging functionality. Features include: @-mention suggestions, customizable trigger characters, and easy integration with any React application. Perfect for social media comments, chat applications, or any interface requiring user mentions.

Install

npm install --save mimi-packetolo

Usage

import React, { useState } from 'react'
import { SuggestionInput } from 'mimi-packetolo'

const App = () => {
  const [comment, setComment] = useState('')
  const [chosenSuggestions, setChosenSuggestions] = useState<string[]>([])
  const suggestions = ['user1', 'user2', 'user3'] // Your list of suggestions

  return (
    <SuggestionInput
      comment={comment}
      setComment={setComment}
      suggestions={suggestions}
      chosenSuggestions={chosenSuggestions}
      setChosenSuggestions={setChosenSuggestions}
      suggestionsTrigger='@' // Optional: defaults to '@'
      placeHolder="Tag users using '@'" // Optional: defaults to "Tag using '@'"
      className='custom-class' // Optional: for custom styling
      inlineStyle={{ width: '300px' }} // Optional: for inline styling
    />
  )
}

Props

Prop	Type	Required	Description
comment	string	Yes	Current input value
setComment	(value: string) => void	Yes	Function to update comment
suggestions	string[]	Yes	Array of available suggestions
chosenSuggestions	string[]	Yes	Array of selected suggestions
setChosenSuggestions	(suggestions: string[]) => void	Yes	Function to update chosen suggestions
suggestionsTrigger	string	No	Character to trigger suggestions (default: '@')
placeHolder	string	No	Input placeholder text
className	string	No	CSS class for custom styling
inlineStyle	CSSProperties	No	Inline styles for the component

License

MIT © MimiKapolo