🚚 pre-release: v2.0.0

.eslintignore

@@ -1,4 +1,6 @@
 build
+dist
 node_modules
-docs
-webpack.*.js
+docs/example-component
+docs/example-hooks
+public

.eslintrc.js

@@ -1,10 +1,36 @@
 module.exports = {
-  "extends": "airbnb",
-  "rules": {
-    "react/jsx-filename-extension": 0,
-    "import/no-extraneous-dependencies": 0
-  },
-  "globals": {
-    document: true
-  }
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    'plugin:react-hooks/recommended',
+  ],
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    jest: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  rules: {
+    '@typescript-eslint/camelcase': 0,
+    '@typescript-eslint/explicit-function-return-type': 0,
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    'react/prop-types': 0,
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+  globals: {
+    document: true,
+  },
 };

.gitignore

@@ -12,7 +12,7 @@ yarn-error.log*
 yarn.lock
 
 # Dependency directories
-node_modules/
+node_modules
 
 # Optional npm cache directory
 .npm
@@ -24,9 +24,8 @@ node_modules/
 *.tgz
 package
 
-# Yarn Integrity file
-.yarn-integrity
-
 # dotenv environment variables file
 .env
 
+dist
+.awcache

.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  printWidth: 120,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  quoteProps: 'consistent',
+  jsxSingleQuote: true,
+  bracketSpacing: true,
+  endOfLine: 'lf',
+};

.vercelignore

@@ -0,0 +1,3 @@
+build
+*.md
+.awcache

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "deno.enable": false
+}

CHANGELOG.md

@@ -36,7 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
     - Parallelize the build process
     - Docs structure clean-up (remove view)
 
-[Unreleased]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.2...HEAD
+[unreleased]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.2...HEAD
 [1.1.2]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.1...v1.1.2
 [1.1.1]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.0...v1.1.1
 [1.1.0]: https://github.com/abinavseelan/react-input-trigger/tree/v1.1.0

CONTRIBUTING.md

@@ -11,6 +11,7 @@ Before submitting your contribution, please take a moment and read through the f
 - All development would require you to just edit the contents of `src`. Please do not modify the contents of `/build`, or `/docs` directly. `/build` will always be generated by the maintainers before publishing to npm, and `/docs` is generated automatically on publish from `/src/docs`.
 
 - A preferred convention for branch names is `<task-type>/<description>`. For example:
+
   - `bugfix/missing-props`
   - `feature/handle-refs`
 
@@ -23,6 +24,7 @@ Before submitting your contribution, please take a moment and read through the f
 - If there are any changes to the dependencies, please make sure to use `npm` rather than `yarn` and that your changes are reflected in both the `package.json` and `package-lock.json` files.
 
 - If adding a new feature:
+
   - Describe your use-case / need for the feature, so that we can understand the scenario better.
   - Preferably raise a suggestion issue, so that we can have a discussion before you start working on the PR. 👩‍💻
 
@@ -36,7 +38,7 @@ You will need [Node.js](http://nodejs.org) **version 6+**
 
 After cloning the repo, run:
 
-``` bash
+```bash
 $ npm install
 ```
 
@@ -48,7 +50,7 @@ There is a `pre-commit` hook that runs the linter to check for code style. Pleas
 
 ### Commonly used NPM scripts
 
-``` bash
+```bash
 # Runs the example project in `/src/docs`, using webpack-dev-server.
 # Use this demo sandbox to test your changes. It has HMR out of the box!
 $ npm start
@@ -64,6 +66,7 @@ $ npm test
 ## Project Structure
 
 - **src**
+
   - **index.js**: This is the main `<InputTrigger />` component source.
   - **docs**: This is the code pertaining to the demo project.
 

README-v1.md

@@ -0,0 +1,227 @@
+# React Input Trigger
+
+[![npm][npm-badge]][npm-url]
+[![license][license-badge]][license-url]
+[![downloads][downloads-badge]][downloads-url]
+[![size][size-badge]][size-url]
+
+[![deps][deps-badge]][deps-url]
+[![peer-deps][peer-deps-badge]][peer-deps-url]
+
+> React component for handling character triggers inside textareas and input fields. 🐼
+
+## Description
+
+Useful for building applications that need Slack-like emoji suggestions (triggered by typing `:`) or Github-like user mentions (triggered by typing `@`).
+
+The component provides the following hooks:
+
+- `onStart`: whenever the trigger is first activated (eg. when `@` is first typed).
+- `onType`: when something is being typed after it's been triggered.
+- `onCancel`: when the trigger is canceled.
+
+The hooks pass some meta-data such as the cursor position and/or the text that has been typed since the trigger has been activated.
+
+![reactinputtrigger](https://user-images.githubusercontent.com/6417910/36937827-0e615e4e-1f3f-11e8-9623-c4141bda3d2e.gif)
+
+## Demo
+
+A live demo of this component can be found [here](https://abinavseelan.com/react-input-trigger).
+
+A detailed guide on using this component to build a Github-style user mentions component [can be found on CampVanilla](https://blog.campvanilla.com/reactjs-input-trigger-github-twitter-mentions-8ad1d878110d).
+
+## Usage
+
+### Getting Started
+
+- Install the component
+
+```bash
+$ npm install react-input-trigger
+```
+
+- Import the component from the package.
+
+```js
+import InputTrigger from 'react-input-trigger';
+```
+
+- Wrap your existing `<textarea />` or `<input />` element with `<InputTrigger />`
+
+```jsx
+<InputTrigger>
+  <textarea />
+</InputTrigger>
+```
+
+---
+
+Or get it in the browser directly via [unpkg](https://unpkg.com/react-input-trigger@latest/build/lib/react-input-trigger.js):
+
+```html
+<script
+  src="https://unpkg.com/react-input-trigger@latest/build/lib/react-input-trigger.js"
+  type="text/javascript"
+></script>
+```
+
+## Component Props
+
+`<InputTrigger>` can take in the following props:
+
+### trigger
+
+This prop takes an object that defines the trigger. The object can have the following properties
+
+- `keyCode`: This is the character code that will fire the trigger.
+- `shiftKey`: (Optional) Set this to `true` if you need the shift key to be pressed along with the `keyCode` to start the trigger. Ignore this property if it's not required.
+- `ctrlKey`: (Optional) Set this to `true` if you need the ctrl key to be pressed along with the `keyCode` to start the trigger. Ignore this property if it's not required.
+- `metaKey`: (Optional) Set this to `true` if you need the cmd key to be pressed along with the `keyCode` to start the trigger. Ignore this property if it's not required.
+
+```jsx
+<InputTrigger
+  trigger={{
+    keyCode: 50,
+    shiftKey: true,
+  }}
+>
+```
+
+### onStart
+
+This prop takes a function that will fire whenever trigger is activated. The function is passed some meta information about the cursor's position that you can use.
+
+```jsx
+<InputTrigger
+  trigger={{
+    keyCode: 50,
+    shiftKey: true,
+  }}
+  onStart={(obj) => { console.log(obj); }}
+>
+```
+
+The parameter `obj` contains the following meta information
+
+```js
+{
+  "hookType": "start",
+  "cursor": {
+    "selectionStart",
+    "selectionEnd",
+    "top",
+    "left",
+    "height"
+  }
+}
+```
+
+### onCancel
+
+This prop takes a function that will fire everytime the user presses backspace and removes the trigger from the input section. The function is passed some meta information about the cursor's position that you can use.
+
+```jsx
+<InputTrigger
+  trigger={{
+    keyCode: 50,
+    shiftKey: true,
+  }}
+  onCancel={(obj) => { console.log(obj); }}
+>
+```
+
+The parameter `obj` contains the following meta information
+
+```js
+{
+  "hookType": "cancel",
+  "cursor": {
+    "selectionStart",
+    "selectionEnd",
+    "top",
+    "left",
+    "height"
+  }
+}
+```
+
+### onType
+
+This prop takes a function that will trigger everytime the user continues typing after starting the trigger. The function is passed some meta information about the cursor's position, as well as the text that the user has typed after triggering that you can use.
+
+```jsx
+<InputTrigger
+  trigger={{
+    keyCode: 50,
+    shiftKey: true,
+  }}
+  onType={(obj) => { console.log(obj); }}
+>
+```
+
+The parameter `obj` contains the following meta information
+
+```js
+{
+  "hookType": "typing",
+  "cursor": {
+    "selectionStart",
+    "selectionEnd",
+    "top",
+    "left",
+    "height"
+  },
+  "text"
+}
+```
+
+### endTrigger
+
+This prop takes a function that returns a function that you need to keep in your parent component. This returned method needs to be called manually by the parent component whenever you are done using the trigger and want to end the trigger.
+
+```jsx
+<InputTrigger
+  endTrigger={
+    endTriggerHandler => {
+      this.endTriggerHandler = endTriggerHandler;
+
+      /*
+        Now you can call `this.endTriggerHandler`
+        anywhere inside the parent component
+        whenever you want to stop the trigger!
+      */
+    }
+  }
+>
+```
+
+## Contributing
+
+Want to fix something, add a new feature or raise an issue? Please read the [contributing guide](https://github.com/abinavseelan/react-input-trigger/blob/master/CONTRIBUTING.md) to get started. :smile:
+
+## Contributors
+
+Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+
+<!-- prettier-ignore -->
+| [<img src="https://avatars2.githubusercontent.com/u/6417910?s=200&v=4" width="100px;"/><br /><sub><b>Abinav Seelan</b></sub>](https://abinavseelan.com)<br />[💻](https://github.com/abinavseelan/react-input-trigger/commits?author=abinavseelan "Code") [📖](https://github.com/abinavseelan/react-input-trigger/commits?author=abinavseelan "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/6426069?s=200&v=4" width="100px;"/><br /><sub><b>Aditi Mohanty</b></sub>](https://github.com/rheaditi)<br />[💻](https://github.com/abinavseelan/react-input-trigger/commits?author=rheaditi "Code") [📖](https://github.com/abinavseelan/react-input-trigger/commits?author=rheaditi "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/6963212?s=200&v=4" width="100px;"/><br /><sub><b>Adam Goldman</b></sub>](https://github.com/goldylucks)<br />[💻](https://github.com/abinavseelan/react-input-trigger/commits?author=goldylucks "Code") |
+| :---: | :---: | :---: |
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
+
+[npm-badge]: https://img.shields.io/npm/v/react-input-trigger.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/react-input-trigger
+[license-badge]: https://img.shields.io/npm/l/react-input-trigger.svg?style=flat-square&color=blue
+[license-url]: https://github.com/abinavseelan/react-input-trigger/blob/master/LICENSE
+[downloads-badge]: https://img.shields.io/npm/dt/react-input-trigger.svg?style=flat-square&color=blue
+[downloads-url]: https://www.npmjs.com/package/react-input-trigger
+[deps-badge]: https://img.shields.io/david/abinavseelan/react-input-trigger.svg?style=flat-square
+[deps-url]: https://david-dm.org/abinavseelan/react-input-trigger
+[peer-deps-badge]: https://img.shields.io/david/peer/abinavseelan/react-input-trigger.svg?style=flat-square
+[peer-deps-url]: https://david-dm.org/abinavseelan/react-input-trigger/peer-status
+[size-badge]: https://img.shields.io/bundlephobia/minzip/react-input-trigger.svg?style=flat-square&label=gzipped
+[size-url]: https://bundlephobia.com/result?p=react-input-trigger