react-hint - Tooltip component for React, Preact, Inferno

•    Javascript

---

React-hint is a small tooltip component for React which is developed with simplicity and performance in mind. It also plays nicely with Preact and Inferno. You don't need to include ReactHint in every component which uses tooltips, just include it once in the topmost container component. In case you need to define multiple instances of ReactHint, you can customise the attribute name per instance. ReactHint also supports custom tooltip content with attached event handlers by overriding the content renderer and returning a react node.

react inferno preact tooltip react-component component hint react-hint react-tooltip

reactour - Tourist Guide into your React Components

•    Javascript

---

From v1.8.6 styled-components it isn't bundled into the package.

react reactjs tour guide react-components tourist-guide introduction step-by-step walkthrough joyride product-intro presentation intro

react-useportal - 🌀 React hook for Portals

•    TypeScript

---

Need to make dropdowns, lightboxes/modals/dialogs, global message notifications, or tooltips in React? React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component (react docs). This hook is also isomorphic, meaning it works with SSR (server side rendering).

react-hooks react react-portal portal loading-bar modal lightbox notification dialog dropdown tooltip hook use react-hook react-component react-useportal react-use-portal transportation react-portal-hook

react-native-copilot - Step-by-step walkthrough for your react native app

•    Javascript

---

Optional: If you want to have the smooth SVG animation, you should install and link react-native-svg. If you are using Expo, you can skip this as Expo comes with react-native-svg. Before defining walkthrough steps for your react elements, you must make them walkthroughable. The easiest way to do that for built-in react native components, is using the walkthroughable HOC. Then you must wrap the element with CopilotStep.

react-native walkthrough intro react-native-joyride react copilot intro.js

react-popper - React wrapper around Popper.js (official)

•    Javascript

---

React wrapper around Popper.js. important note: popper.js is not a tooltip library, it's a positioning engine to be used to build features such as (but not restricted to) tooltips.

popper react placement popover tooltip react-popper popperjs component drop

react-portal-tooltip - Awesome React tooltip

•    Javascript

---

Awesome tooltips. StatefulToolTip takes the same props as ToolTip, plus a className prop that will be applied to the root element wrapping the parent (see the example).

react reactjs component tooltip portal

react-tooltip - react tooltip component

•    Javascript

---

You can import node_modules/react-tooltip/standalone/react-tooltip.min.js into your page. Please make sure that you have already imported react and react-dom into your page.

react tooltip react-component react-tooltip

react-overlays - Utilities for creating robust overlay components

•    Javascript

---

All of these utilities have been abstracted out of react-bootstrap in order to provide better access to the generic implementations of these commonly needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, css or otherwise. If you are looking for more complete overlays, modals, or tooltips--something you can use right out of the box--check out react-bootstrap, which is (or soon will be) built on using these components.

react react-overlays modal overlay affix react-component tooltip bootstrap popover

joyride - jQuery feature tour plugin.

•    Javascript

---

Joyride is an easy to configure site tour wizard for Foundation for Sites. You can try out Joyride on the Demo Page.

joyride foundation

react-mdl - React Components for Material Design Lite

•    CSS

---

This library is now deprecated. It's higly recommended to use Material Design Components instead. Instead of using the official material.css and material.js files from the MDL project, you should use the files we provide in /extra. The reason to that is because the official Layout component is not fully compatible with React. We made a patch and we re-exported everything so people can still use it. If you're worried about the changes we made, you can take a look at the patch note or read about the issue in this ticket.

react react-component mdl material-design badge button card checkbox data-table fab-button icon icon-button icon-toggle radio radio-group switch textfield progress progress-bar spinner slider tooltip menu dropdown layout drawer grid tabs

react-native-button-component - A Beautiful, Customizable React Native Button component for iOS & Android

•    Javascript

---

React Native Button component for iOS & Android. CircleButton, RoundButton, RectangleButton is on top of ButtonComponent. So I recommend you should use CircleButton, RoundButton, RectangleButton, rather than directly use ButtonComponent because those button components may have preset some options.

react react-native button react-native-button ios android react-button react-native-button-component component react-component react-native-component

kalendaryo - An unopinionated React date component :atom_symbol: + :date:fns

•    Javascript

---

Kalendaryo is an unopinionated React component for building calendars. It has no opinions about what your calendar component should look or function like but rather only helps you deal with those unique constraints by providing various variables your calendar component needs such as the calendar's state data and methods for getting(i.e. all the days in a month) and setting(i.e. selecting the date from a day) plus many more! See the Basic Usage section to see how you can build a basic calendar component with Kalendaryo, or see the Examples section to see more examples built with Kalendaryo. Is the state for the current date the component is in. By convention, this should only change when the calendar changes its current date, i.e. moving to and from a month or year on the calendar.

react-date react-kalendaryo react-date-component react calendar react-calendar kalendaryo unopinionated-react-date-component react-calendar-component

react-native-star-rating - A React Native component for generating and displaying interactive star ratings

•    Javascript

---

A React Native component for generating and displaying interactive star ratings. Compatible with both iOS and Android. For the emptyStar, fullStar, halfStar, and iconSet props, please refer to the react-native-vector-icons package for the valid string names for the star icons. When selecting the icon string names, you must remember to remove the font family name before the first hyphen. For example, if you want to use the ion-ios-star from the Ionicon font set, you would set the fullStar prop to ios-star and the iconSet to Ionicons.

star-rating star-rating-component react-native react-native-component custom-star star-icon react-native-star-rating star rating ratings component react native stars review reviews react-component ios android

react-native-popup-dialog - A React Native Popup Dialog, Highly Customizable, Easy Use & Support Custom Animation

•    Javascript

---

React Native Popup Dialog for iOS & Android. Another similar dialog component: react-native-dialog-component the main difference is style.

react react-animate react-native component dialog es6 popup react-dialog react-native-popup-dialog react-native-dialog popup-dialog react-component ios android

react-native-really-awesome-button - 📱React Native 60fps extendable, production ready component that renders an animated set of 3D UI buttons

•    Javascript

---

react-native-really-awesome-button is a performant, extendable, production ready ReactNative component that renders an animated set of 3D UI buttons. MIT. Copyright (c) 2018 Rafael Caferati.

react-native react-ui-components button 3d-buttons react-native-component react-native-button react-native-buttons progress-button animated-buttons ui-component animated-button awesome-button really-awesome-button 3d-button react-component ios android

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

•    Javascript

---

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.

react react-tags autocomplete dragdrop drag-drop tags tag-input react-component autosuggest

react-native-check-box - Checkbox component for react native, it works on iOS and Android.

•    Javascript

---

Checkbox component for react native, it works on iOS and Android. Add react-native-check-box to your js file.

check-box checkbox-component react-native react-native-checkbox react-native-component check box react-component ios android

react-check-auth - Add auth protection anywhere in your react/react-native app

•    Javascript

---

react-check-auth is a tiny react component that helps you make auth checks declarative in your react or react-native app. This component uses React 16's new context API and is just ~100 LOC. It can also serve as a boilerplate for getting familiar with using the context API to pass information from a parent component to arbitrarily deep child components.

react authentication react-authentication npm-module

react-native-accordion - An Accordion Component for React Native

•    Javascript

---

react-native-accordion is an easy to use Accordion component for React Native app. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

react-native react native accordion react-component react-native-component

react-game-kit - Component library for making games with React & React Native

•    Javascript

---

react-game-kit provides a set of helper components to make it easier to create games with React and React Native.The Loop component uses context to pass a subscribable game tick down your component tree. The Stage component does the same with game scale.

physics-bodies spritesheet tilemap component-tree game react reactjs physics-engine sprite-animation matter