react-tribute

React component for mentioning using Zurb's Tribute library

Usage no npm install needed!

<script type="module">
  import reactTribute from 'https://cdn.skypack.dev/react-tribute';
</script>

README

React Tribute


A React Component that uses zurb/tribute, by Bolste.

Installing

You can install React Tribute using npm: npm install react-tribute; however, we prefer yarn: yarn install --save react-tribute.

Import into your ES6 code.

import Tribute from 'react-tribute';

Usage

You can simply wrap any textarea, input, or contenteditable element with Tribute:

<Tribute
  options={{
    values: [{ key: "Test McTesterson", value: "test"}  
  }}
>
  <textarea></textarea>
</Tribute>

The Tribute component will bind tributejs to the textarea that you pass it as children.

The Tribute component takes all options that zurb/tribute expects. The only exception is that you can provide a function to the menuContainer option that returns a DOM node.

For more advanced usage, such as menuContainer, customRefs, and the onChange callback, see the Github Pages.

Testing

You can run the Mocha tests using:

npm run test
npm run test -- -w # if you want to watch for changes and rerun tests

Build for Production

Build the dist and example using:

npm run run