├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .nvmrc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── docs ├── app.7191e.js └── index.html ├── package-lock.json ├── package.json ├── src ├── docs │ ├── index.html │ └── index.js └── index.js ├── webpack.common.config.js ├── webpack.dev.config.js └── webpack.prod.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "targets": { 7 | "browsers": [ 8 | "last 2 versions", 9 | "safari >= 7" 10 | ], 11 | "node": 8 12 | } 13 | } 14 | ], 15 | "react" 16 | ], 17 | "plugins": [ 18 | "transform-object-rest-spread" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Default styles 7 | [*] 8 | indent_style = space 9 | indent_size = 2 10 | end_of_line = lf 11 | charset = utf-8 12 | trim_trailing_whitespace = true 13 | insert_final_newline = true -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build 2 | node_modules 3 | docs 4 | webpack.*.js 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "airbnb", 3 | "rules": { 4 | "react/jsx-filename-extension": 0, 5 | "import/no-extraneous-dependencies": 0 6 | }, 7 | "globals": { 8 | document: true 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Build 2 | build 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # since we use npm 12 | yarn.lock 13 | 14 | # Dependency directories 15 | node_modules/ 16 | 17 | # Optional npm cache directory 18 | .npm 19 | 20 | # Optional eslint cache 21 | .eslintcache 22 | 23 | # Output of 'npm pack' 24 | *.tgz 25 | package 26 | 27 | # Yarn Integrity file 28 | .yarn-integrity 29 | 30 | # dotenv environment variables file 31 | .env 32 | 33 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v8.9.4 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [Unreleased] 9 | 10 | - Add a [CHANGELOG.md](https://keepachangelog.com) ([#14](https://github.com/abinavseelan/react-input-trigger/pull/14)) 11 | 12 | ## [1.1.2] - 2018-06-17 13 | 14 | - **Issues** 15 | - Fix issue with child refs ([#2](https://github.com/abinavseelan/react-input-trigger/pull/2)) - [@goldylucks](https://github.com/goldylucks) 16 | 17 | ## [1.1.1] - 2018-06-17 18 | 19 | - **Issues** 20 | - Fix styling issues due to intermediate `
` ([#4](https://github.com/abinavseelan/react-input-trigger/issues/4)) 21 | - **Contributing** 22 | - Add a [Contributing Guide](https://github.com/abinavseelan/react-input-trigger/blob/master/CONTRIBUTING.md) to help others get started with contributing to this project. 😄 23 | - **Other** 24 | - Lock in port `3000` for development. 25 | 26 | ## [1.1.0] - 2018-04-15 27 | 28 | - **Issues** 29 | - Fix [#1](https://github.com/abinavseelan/react-input-trigger/issues/1) 30 | - **Features** 31 | - `react-input-trigger` can now be imported via: 32 | - [CommonJS](http://www.commonjs.org/) (through `package.json`: main) 33 | - ES2015 Modules (through `package.json`: module) 34 | - **Contributing** 35 | - Project structural changes: 36 | - Parallelize the build process 37 | - Docs structure clean-up (remove view) 38 | 39 | [Unreleased]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.2...HEAD 40 | [1.1.2]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.1...v1.1.2 41 | [1.1.1]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.0...v1.1.1 42 | [1.1.0]: https://github.com/abinavseelan/react-input-trigger/tree/v1.1.0 43 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # React Input Trigger Contributing Guide 2 | 3 | Before submitting your contribution, please take a moment and read through the following guidelines. 4 | 5 | - [Pull Request Guidelines](#pull-request-guidelines) 6 | - [Development Setup](#development-setup) 7 | - [Project Structure](#project-structure) 8 | 9 | ## Pull Request Guidelines 10 | 11 | - 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`. 12 | 13 | - A preferred convention for branch names is `/`. For example: 14 | - `bugfix/missing-props` 15 | - `feature/handle-refs` 16 | 17 | - As for commit guidelines on your branch, do not fret! 🙂 The commits will be squash merged by the maintainers before merging to `master`. 18 | 19 | - Make sure `npm run lint` passes. This command runs [eslint](https://eslint.org/) to enforce the code-style conventions. 20 | 21 | - Make sure `npm run test` passes. This will check if the package can be built correctly without build errors. 22 | 23 | - 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. 24 | 25 | - If adding a new feature: 26 | - Describe your use-case / need for the feature, so that we can understand the scenario better. 27 | - Preferably raise a suggestion issue, so that we can have a discussion before you start working on the PR. 👩‍💻 28 | 29 | - If fixing a bug: 30 | - Reference any open/closed github issues related to this bug. 31 | - Provide detailed description of the bug in the PR. Live demo preferred. 🚀 32 | 33 | ## Development Setup 34 | 35 | You will need [Node.js](http://nodejs.org) **version 6+** 36 | 37 | After cloning the repo, run: 38 | 39 | ``` bash 40 | $ npm install 41 | ``` 42 | 43 | **Note: If you're using `yarn`, just make sure you aren't committing the yarn lockfile.** 44 | 45 | ### Committing Changes 46 | 47 | There is a `pre-commit` hook that runs the linter to check for code style. Please make sure that any issues that come up during this linter check are fixed when raising the Pull Request. 48 | 49 | ### Commonly used NPM scripts 50 | 51 | ``` bash 52 | # Runs the example project in `/src/docs`, using webpack-dev-server. 53 | # Use this demo sandbox to test your changes. It has HMR out of the box! 54 | $ npm start 55 | 56 | # Check for linting issues. 57 | # This command will also auto-fix some common issues. 58 | $ npm run lint 59 | 60 | # Tests if the package can be built correctly without errors. 61 | $ npm test 62 | ``` 63 | 64 | ## Project Structure 65 | 66 | - **src** 67 | - **index.js**: This is the main `` component source. 68 | - **docs**: This is the code pertaining to the demo project. 69 | 70 | - **build** 71 | 72 | This contains the production builds of the component. **Do not edit this directly** 73 | 74 | - **docs** 75 | 76 | This is the production example for the component. **Do not edit this directly** 77 | 78 | ## Credits 79 | 80 | This file has been adapted from the awesome folks at Vuejs: [VueJS's Contributing Guidelines](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md). 81 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Abinav Seelan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Input Trigger 2 | 3 | [![npm][npm-badge]][npm-url] 4 | [![license][license-badge]][license-url] 5 | [![downloads][downloads-badge]][downloads-url] 6 | [![size][size-badge]][size-url] 7 | 8 | [![deps][deps-badge]][deps-url] 9 | [![peer-deps][peer-deps-badge]][peer-deps-url] 10 | 11 | > React component for handling character triggers inside textareas and input fields. 🐼 12 | 13 | ## Description 14 | 15 | Useful for building applications that need Slack-like emoji suggestions (triggered by typing `:`) or Github-like user mentions (triggered by typing `@`). 16 | 17 | The component provides the following hooks: 18 | 19 | * `onStart`: whenever the trigger is first activated (eg. when `@` is first typed). 20 | * `onType`: when something is being typed after it's been triggered. 21 | * `onCancel`: when the trigger is canceled. 22 | 23 | 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. 24 | 25 | ![reactinputtrigger](https://user-images.githubusercontent.com/6417910/36937827-0e615e4e-1f3f-11e8-9623-c4141bda3d2e.gif) 26 | 27 | ## Demo 28 | 29 | A live demo of this component can be found [here](https://abinavseelan.com/react-input-trigger). 30 | 31 | 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). 32 | 33 | ## Usage 34 | 35 | ### Getting Started 36 | 37 | * Install the component 38 | 39 | ```bash 40 | $ npm install react-input-trigger 41 | ``` 42 | 43 | * Import the component from the package. 44 | 45 | ```js 46 | import InputTrigger from 'react-input-trigger'; 47 | ``` 48 | 49 | * Wrap your existing `