bullet-textarea
v1.0.16
Published
A React component that streamlines the creation and organization of bullet-point lists. Automatically formats each line as a bullet point.
Downloads
51
Maintainers
Readme
Bullet Textarea
Bullet Textarea is a React component designed to simplify the creation and management of bullet-point lists. Each line in the textarea
is automatically formatted as a bullet point, making it an ideal tool for organizing thoughts, creating lists, or managing structured content in your applications.
Features
- Automatically prepends bullets (
❖
) to each line. - Easily create structured lists with intuitive keyboard shortcuts (e.g.,
Enter
for a new bullet). - Lightweight and customizable.
- Compatible with modern React versions.
Installation
To add bullet-textarea
to your project, run:
npm install bullet-textarea
or
yarn add bullet-textarea
Usage
Here’s a basic example to get started:
import React from 'react';
import BulletTextarea from 'bullet-textarea';
const App = () => {
const handleChange = (value) => {
console.log('Updated Value:', value);
};
return (
<div>
<h1>Bullet Textarea Demo</h1>
<BulletTextarea defaultValue="❖ First Item\n❖ Second Item" onChange={handleChange} />
</div>
);
};
export default App;
Props
| Prop | Type | Default | Description |
|---------------|----------|--------------|-------------------------------------------------------------|
| defaultValue
| string
| ❖
| Initial text in the textarea. Must start with bullets. |
| onChange
| func
| undefined
| Callback function triggered whenever the text changes. |
Customization
Styling
You can customize the component’s appearance by overriding the textarea
styles:
<BulletTextarea
defaultValue="❖ My Bullet Point"
onChange={(value) => console.log(value)}
style={{ width: '500px', height: '300px', fontFamily: 'Arial' }}
/>
Default Bullet Style
The default bullet character is ❖
. You can modify the bullet logic in your code to use a different character, such as -
or •
.
Development
Running Locally
Clone the repository:
git clone https://github.com/umeshthapa121/bullet-textarea.git
cd bullet-textarea
Install dependencies:
npm install
Run the development server:
npm run dev
Run tests:
npm run test
Contributing
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a feature branch:
git checkout -b feature-name
. - Commit your changes:
git commit -m 'Add feature'
. - Push to your branch:
git push origin feature-name
. - Open a pull request.
License
This project is licensed under the ISC License.
Support
If you encounter any issues, feel free to open a bug report in the issues section.
Keywords
React, bullet, textarea, list management, UI component, text editor
Let me know if you need further modifications or enhancements!