react-bulleted-textarea

React component for bulleted textarea

Check out live demo

Install

npm install --save react-bulleted-textarea

Usage

Default Bulleted Text Area

Bulleted text area build with styled components library. (Gets buggy when used with material-ui)

import React from 'react'

import { BulletedTextArea } from 'react-bulleted-textarea'

class Example extends Component {
  render() {
    const values = ['a', 'b', 'c']
    const handleChange = (values) => {
      console.log(values) // [a, b, c]
    }
    const bulletChar = '-' // optional
    return (
      <BulletedTextArea
        onChange={handleChange}
        values={values}
        bulletChar={bulletChar}
      />
    )
  }
}

Material-UI Bulleted Text Area

Bulleted Text Area used with material ui components

import React from 'react'

import { MuiBulletedTextArea } from 'react-bulleted-textarea'

class Example extends Component {
  render() {
    const values = ['a', 'b', 'c']
    const handleChange = (values) => {
      console.log(values) // [a, b, c]
    }
    const bulletChar = '-' // optional
    return (
      <MuiBulletedTextArea
        onChange={handleChange}
        values={values}
        bulletChar={bulletChar}
      />
    )
  }
}

Props

| Prop Name | Type | Required | Default Value | Description | |---|---|---|---|---| | onChange | (values: string[]) => void | true | n/a | Function that is called everytime the user writes something in the text area | | values | string[] | false | [ ] | Initial values for the text area | | bulletChar | string | false | - | Character used as bullet points |

License

MIT © chrisrabe