react-bulleted-textarea's Introduction

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