@kenmori/copy-name-manager NPM

CopyNameManager

CopyNameManager is a lightweight JavaScript/TypeScript library that helps manage unique copy names in applications. This is particularly useful when you need to create multiple copies of items with distinct names and want to ensure that each copy has a unique name, even after some copies are deleted.

Features

Automatically generates unique copy names in the format name, nameのコピー, nameのコピー2, etc.
Handles deletion of copies and reuses deleted copy numbers when new copies are added.
Provides easy integration with frontend frameworks like React.

Installation

You can install the library via npm:

npm install copy-name-manager

Usage

Basic Example

Here is how you can use CopyNameManager in a JavaScript/TypeScript project:

import { CopyNameManager } from "copy-name-manager";

const copyNameManager = new CopyNameManager();

const firstCopy = copyNameManager.addCopy("Document");
console.log(firstCopy); // Output: "Document"

const secondCopy = copyNameManager.addCopy("Document");
console.log(secondCopy); // Output: "Documentのコピー"

const thirdCopy = copyNameManager.addCopy("Document");
console.log(thirdCopy); // Output: "Documentのコピー2"

// Removing a copy
copyNameManager.removeCopy("Documentのコピー");
console.log(copyNameManager.getCopies()); // Output: ["Document", "Documentのコピー2"]

// Adding a new copy after deletion
const newCopy = copyNameManager.addCopy("Document");
console.log(newCopy); // Output: "Documentのコピー"

React Example

CopyNameManager can be easily integrated into React applications. Below is an example of how to use it:

import React, { useState } from "react";
import { CopyNameManager } from "copy-name-manager";

const CopyNameManagerComponent = () => {
  const copyNameManager = new CopyNameManager();
  const [copies, setCopies] = useState<string[]>([]);

  const handleAddCopy = () => {
    const newCopy = copyNameManager.addCopy("Document");
    setCopies([...copyNameManager.getCopies()]);
  };

  const handleRemoveCopy = (name: string) => {
    copyNameManager.removeCopy(name);
    setCopies([...copyNameManager.getCopies()]);
  };

  return (
    <div>
      <button onClick={handleAddCopy}>コピー</button>
      <ul>
        {copies.map((copy, index) => (
          <li key={index}>
            {copy} <button onClick={() => handleRemoveCopy(copy)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default CopyNameManagerComponent;