react-input-placeholder-chips

React input component with insertable placeholder chips (for example {{candidateName}}).

Install

npm install react-input-placeholder-chips

Usage

import { useState } from "react";
import { InputWithPlaceholderChips } from "react-input-placeholder-chips";
import "react-input-placeholder-chips/style.css";

export default function Example() {
  const [value, setValue] = useState("");

  return (
    <InputWithPlaceholderChips
      id="template-message"
      name="templateMessage"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Type message and insert placeholders..."
      placeholderChips={[
        { label: "Candidate Name", value: "candidateName" },
        { label: "Hiring Manager", value: "hiringManager" },
      ]}
    />
  );
}

Props

• value: string - Controlled value containing text and placeholders.
• onChange: (event) => void - Called with serialized output ({{token}} format).
• placeholder?: string - Placeholder shown when empty.
• placeholderChips?: Array<{ label: string; value: string } | string> - Chips the user can insert from the + menu. Each item is either { label, value } (menu shows label, inserted token is value) or a string (used as both label and token). Example strings: ["candidateName", "jobTitle"].
• placeholderMeta? - Same as placeholderChips (older name). If both are set, placeholderChips wins.
• disabled?: boolean
• id?: string
• name?: string
• className?: string

Local development

npm install
npm run dev

Build package

npm run build:package

This outputs publishable files in dist/.

Publish to npm

1. Login: npm login
2. (Optional) Dry run: npm publish --dry-run
3. Publish: npm publish --access public