https://github.com/danrpts/react-cursor-dropdown

A React HOC for adding cursor dropdown menus to textareas and text inputs.
https://github.com/danrpts/react-cursor-dropdown

cursor dropdown hoc input react textarea

Last synced: 3 months ago
JSON representation

A React HOC for adding cursor dropdown menus to textareas and text inputs.

• Host: GitHub
• URL: https://github.com/danrpts/react-cursor-dropdown
• Owner: danrpts
• License: mit
• Created: 2018-10-07T04:24:13.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-23T02:04:11.000Z (over 6 years ago)
• Last Synced: 2025-02-13T20:39:09.866Z (4 months ago)
• Topics: cursor, dropdown, hoc, input, react, textarea
• Language: JavaScript
• Homepage: https://superdan.io/react-cursor-dropdown/
• Size: 6 MB
• Stars: 3
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-cursor-dropdown

> A React HOC for adding cursor dropdown menus to textareas and inputs - [Try it out!](https://superdan.io/react-cursor-dropdown/)

[![NPM](https://img.shields.io/npm/v/react-cursor-dropdown.svg)](https://www.npmjs.com/package/react-cursor-dropdown) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save react-cursor-dropdown

```

## Usage

```jsx

import React, { Component } from "react";

import { WithCursorDropdown, CursorDropdown } from "react-cursor-dropdown";

// Import the component you want to dropdown from the cursor

import SomeListComponent from "SomeListComponent";

const Input = props => ;

const InputWithCursorDropdown = WithCursorDropdown(Input);

class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      value: ""

    };

    this.handleChange = ({ target }) => {

      this.setState({

        value: target.value

      });

    };

    this.handleCursorDropdownChange = ({ value, cursor }) => {

      // Do something with the value from the dropdown

    };

  }

  render() {

    return (

      

        // Specify the regex to match against the current word (capture group

        required)

        

      

    );

  }

}

```

## License

MIT © [danrpts](https://github.com/danrpts)