React Component - Add custom functionality to npm package

Question

I have an app which pretty much looks like this:

class App extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      tags: [
        { id: 1, name: "Apples" },
        { id: 2, name: "Pears" }
      ],
      suggestions: [
        { id: 3, name: "Bananas" },
        { id: 4, name: "Mangos" },
        { id: 5, name: "Lemons" },
        { id: 6, name: "Apricots" }
      ]
    }
  }

  handleDelete (i) {
    const tags = this.state.tags.slice(0)
    tags.splice(i, 1)
    this.setState({ tags })
  }

  handleAddition (tag) {
    const tags = [].concat(this.state.tags, tag)
    this.setState({ tags })
  }

  render () {
    return (
      <ReactTags
        tags={this.state.tags}
        suggestions={this.state.suggestions}
        handleDelete={this.handleDelete.bind(this)}
        handleAddition={this.handleAddition.bind(this)} />
    )
  }
}

It's based on this npm module. I am not sure if I am missing something, but when I type in a tag, whilst I do see the suggestions pop up, I would also like to be able to press the TAB key and autocomplete the rest of the tag, whenever there is only one option left. Similar to the stackoverflow tag functionality.

My main question is this: How could I use a package like this, installed via npm, and extend its functionality? What would I do to make this my own, change things around etc.? I do not want to fiddle around in my npm modules folder!

Answer 1

You can fork the plugin and install it in your project as below

npm i {github_project_link}

If you want to contribute to the community. You can raise PR to the origin repo.