react-tags - A fantastically simple tagging component for your React projects

  •        154

React-tags is a simple tagging component ready to drop in your React projects. The component is inspired by GMail's To field in the compose window. Because I was looking for an excuse to build a standalone component and publish it in the wild? To be honest, I needed a tagging component that provided the above features for my React-Surveyman project. Since I was unable to find one which met my requirements (and the fact that I generally enjoy re-inventing the wheel) this is what I came up with.

http://prakhar1989.github.io/react-tags/example/
https://github.com/prakhar1989/react-tags

Dependencies:

lodash : ^4.17.4
prop-types : ^15.6.0
react-dnd : ^2.0.2
react-dnd-html5-backend : ^2.0.0

Tags
Implementation
License
Platform

   




Related Projects

react-tagsinput - Highly customizable React component for inputing tags.

  •    Javascript

Highly customizable React component for inputing tags.A working example can be found in example/components/autocomplete.js.

react-autosuggest - WAI-ARIA compliant React autosuggest component

  •    Javascript

Check out the Homepage and the Codepen examples. Array of suggestions to display. The only requirement is that suggestions is an array. Items in this array can take an arbitrary shape.

react-helmet - A document head manager for React

  •    Javascript

This reusable React component will manage all of your changes to the document head. Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.

react-native-autocomplete-input - Pure javascript autocomplete input for react-native

  •    Javascript

A pure JS autocomplete component for React Native. Use this component in your own projects or use it as inspiration to build your own autocomplete. Tested with RN >= 0.26.2. If you want to use RN < 0.26 try to install react-native-autocomplete-input <= 0.0.5.

react-bootstrap-typeahead - React typeahead with Bootstrap styling

  •    Javascript

A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js. It supports both single- and multi-selection and is compliant with WAI-ARIA authoring practices. Try the live examples. Please note that documentation and examples apply to the most recent release and may no longer be applicable if you're using an outdated version.


react-input-enhancements - Set of enhancements for input control

  •    Javascript

The intention of creating this library was to bring input component out of the dropdown/autocomplete/whatever code, so it could be easily replaced with your custom component, and also to split independent functionality into different components, which could be combined with each other (still not quite sure it was worth it, though). NB: these are not "high quality, ready for production components" - they are more of a concept (which is a fancy word for "they are still quite buggy"). Think twice before using it in production.

sablono - Lisp/Hiccup style templating for Facebook's React in ClojureScript.

  •    Clojure

Lisp/Hiccup style templating for Facebook’s React in ClojureScript. Ŝablono only supports tags and attributes that can be handled by React. This means you can’t have your own custom tags and attributes at the moment. For more details take a look at the Tags and Attributes section in the React documentation.

react-selectize

  •    LiveScript

ReactSelectize is a stateless Select component for ReactJS, that provides a platform for the more developer friendly SimpleSelect & MultiSelect components. Both SimpleSelect & MultiSelect have been designed to work as drop in replacement for the built-in React.DOM.Select component.

react-dnd - Drag and Drop for React

  •    TypeScript

Drag and Drop for React. Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.

downshift - 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components

  •    Javascript

You need an autocomplete/dropdown/select experience in your application and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.This is a component that controls user interactions and state for you so you can create autocomplete/dropdown/select/etc. components. It uses a render function as children which gives you maximum flexibility with a minimal API because you are responsible for the rendering of everything and you simply apply props to what you're rendering.

react-native-sortable-listview - Drag drop capable wrapper of ListView for React Native

  •    Javascript

Drag drop capable wrapper of ListView for React Native. Allows for dragging and dropping of rows with automatic scrolling while dragging. See example.

react-mentions - @mention people in a textarea

  •    Javascript

A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter. MentionsInput is the main component rendering the textarea control. It takes one or multiple Mention components as its children. Each Mention component represents a data source for a specific class of mentionable objects, such as users, template variables, issues, etc.

react-smooth-dnd - react wrapper components for smooth-dnd

  •    Javascript

A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios. It uses css transitions for animations so it's hardware accelerated whenever possible. This library consists wrapper React components over smooth-dnd library.

react-planner - :pencil2: A React Component for plans design

  •    Javascript

react-planner is a React component which can be used to draw model buildings. Drag & drop from a catalog of customizable and ready-to-use objects, you can start from 2D wireframes and land on 3D models. As a developer you can provide your users with new objects by adding them to the catalog.

react-rangeslider - A lightweight responsive react range slider component

  •    Javascript

A fast & lightweight react component as a drop in replacement for HTML5 input range slider element. React-Rangeslider is bundled with a slider component & default styles which can be overridden depending on your design requirements.

react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

  •    Javascript

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

react-typeahead - Pure react-based typeahead and typeahead-tokenizer

  •    Javascript

react-typeahead is a javascript library that provides a react-based typeahead, or autocomplete text entry, as well as a "typeahead tokenizer", a typeahead that allows you to select multiple results. Basic typeahead input and results list.

react-geosuggest - A React autosuggest for the Google Maps Places API.

  •    Javascript

A React autosuggest for the Google Maps Places API. You can also define your own suggests as defaults. Works with Preact, too. Visit the Google Developer Console to generate your API key. The API's that you have to enable in your Google API Manager Dashboard are Google Maps Geocoding API, Google Places API Web Service and Google Maps Javascript API.

markdown-to-jsx - 🏭 The most lightweight, customizable React markdown component.

  •    Javascript

The most lightweight, customizable React markdown component. Any HTML tags rendered by the compiler and/or <Markdown> component can be overridden to include additional props or even a different HTML representation entirely.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.