Nondeterministic Postrequisite Metaprotocol

    tweet-textarea-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    TweetTextarea React Component

    GitHub GitHub package.json version GitHub contributors GitHub last commit

    GitHub watchers GitHub Repo stars GitHub forks

    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

    Install

    npm i tweet-textarea-react

    DownloadsWeekly Downloads

    42

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    374 kB

    Total Files

    75

    Last publish

    Collaborators

    • amsaid1989