TweetTextarea React Component

A simple React component that replicates the behaviour of Twitter's tweet input area. It detects and highlights URLs, hashtags, user mentions and cashtags.

The component is built from scratch and it doesn't rely on any dependencies (except for React itself), so it is a relatively lightweight component.

Installation

You can install the component from npm using either npm or yarn:

npm install --save tweet-textarea-react

or:

yarn add tweet-textarea-react

Usage

Once installed, you can start using the component immediately, but first, you need to import it:

// ES6
import TweetTextarea from 'tweet-textarea-react'

// CommonJS
const TweetTextarea = require('tweet-textarea-react')

You can then render the component in your app:

function App() {
    return <TweetTextarea />;
}

The TweetTextarea component supports all attributes that are supported by the div element, except for contentEditable which is required for the component to work. If you try to pass contentEditable to the component, then your React app will probably not compile if you are using TypeScript, or your attribute will be overridden if you are using JavaScript.

The component comes with two sets of default styles applied. The first defines what the textarea itself looks like. This can be overridden by passing a custom class when using the component.

function App() {
    return <TweetTextarea className="custom-class" />;
}

The second default style is the one that defines how URLs, hashtags, etc. will be highlighted. This can be overridden by passing a class name to the highlightClassName attribute.

function App() {
    return <TweetTextarea highlightClassName="custom-highlight" />;
}

Contributing

Contributions are more than welcome. If you have any features you would like to add to the component, please fork the project, add your code and then open a pull request.

After forking the project, you will need to clone it locally. To do so, first create a new directory somewhere on your local system.

mkdir TweetTextarea
cd TweetTextarea

Next, you need to clone the repository:

git clone https://github.com/amsaid1989/tweet-textarea-react.git

This will clone the repository in a directory called tweet-textarea-react. Make sure you don't change the name of the directory since the project relies on the name for building the component and connecting it to the test app that you will create next.

For simplicity, use create-react-app to create the test app. If you would like the app to use JavaScript, you can run either of the following commands:

# npm
npx create-react-app test_app

# yarn
yarn create react-app test_app

Alternatively, if you would like to use TypeScript, run either of the following commands:

# npm
npx create-react-app test_app --template typescript

# yarn
yarn create react-app test_app --template typescript

Next, install the component's dependencies and build it to make sure it is actually working, before you start changing it:

cd tweet-textarea-react

# npm
npm install
npm build

# yarn
yarn install
yarn build

This will build the component and automatically add it to the test app we created above.

You then need to import the component into the test app and render it.

import TweetTextarea from 'tweet-textarea-react'

function App() {
    return <TweetTextarea />
}

Then, navigate to the test app and start it:

cd ../test_app

# npm
npm start

# yarn
yarn start

In your browser, navigate to the location of the app (usually localhost:3000 when using create-react-app).

You should now see the component rendered and you should be able to type text into. Additionally, URLs, hashtags, user mentions and cashtags should be highlighted properly.

If all of that works properly for you, then you are ready to make any changes you would like to add to the component.

Building the component in watch mode

When developing, it is always better to use watch mode, where any changes made to the code are automatically reflected, without having to manually build the component every time.

Although the component uses rollup for bundling, there is currently an issue that prevents the component from being properly built and added to the test app when using rollup's watch mode.

Therefore, the project currently relies on a Visual Studio Code task to build the code. To trigger this task automatically, the project currently relies on the Trigger Task on Save extension. If you would like to build the component automatically every time you make a change to it, you will need to use Visual Studio Code and the Trigger Task on Save extension. The configuration for the task and how to trigger it is already provided in the repository, so it should work out of the box once you install the extension.

NOTE

Using the Trigger Task on Save with Visual Studio Code is not very robust. Sometimes building the component would fail. In this case, you will need to build the component again. Usually, it succeeds on the second time.

If you don't want to use Visual Studio Code, you will need to configure your own text editor/IDE to achieve the same result.

Testing

To test that the component works across different browsers/devices, the project uses Microsoft's Playrwright library. If you would like to learn more about the library and how it works, you can refer to their official documentation.

To run the tests, you will first need to install the browsers supported by Playwright as well as the dependencies needed to run those browsers:

# npm
npx playwright install
npx playwright install-deps

# yarn
yarn playwright install
yarn playwright install-deps

Once complete, you can now run the tests:

# npm
npm test

# yarn
yarn test

NOTE

This will run all tests across all browsers and devices, which means it will take a little bit of time to finish running all the tests.

If you want to run tests for a specific browser/device or run only specific tests, please refer to the Playwright documentation and to the project's Playwright configuration for the supported browsers/devices.

Licence

MIT

npm