Beautiful Select Input Component Based On Tailwind CSS
A beautiful, customizable, searchable select input React component built on top of TailwindCSS. How to use it: 1. Installation. c# Yarn $ yarn add react-tailwindcss-select # NPM $ npm i react-tailwindcss-select 2. Import the select component. c// React component import React from 'react'; import Select from 'react-tailwindcss-select'; c// With React Hooks import
Customizable One-time Password Input Component – react18-input-otp
A fully customizable, one-time password (OTP), phone number, and pin code input component for React powered apps. Key Features: It works great on both react and ionic app. Works like a charm on mobile too. You can specify only numeric inputs with inputNum
Custom Video Control For React Native
Controls elements and utilities for React Native video players. Components Included: VideoControls ControlSlider ControlThumb ControlVideoState ControlFullScreen ControlTouchable Hooks Included: useControlSlider useControlsVideoState useControlFullScreen useControlThumb useLayout useTapGesture / useLongPressGesture useTimeFromThumb useControlsVisibility usePinchGesture Installation: # Yarn $ yarn add @premieroctet/react-native-video-controls # NPM $ npm i @premieroctet/react-native-video-controls Basic usage: <VideoControls componentsProps={componentProps} components={components} onFastForward={onFastForward} onFastRewind={onFastRewind} videoElement={ <Video
Fast Unstyled Command Menu Component For React – cmdk
⌘K is a command menu React component that can also be used as an accessible combobox. You render items, it filters and sorts them automatically. ⌘K supports a fully composable API. so you can wrap items in other components or
Highlight A Keyword In A Piece Of Text
A React component that highlights a keyword in a piece of text and returns a React element. How to use it: 1. Install & import. # NPM $ npm i react-keywords import React from 'react'; import Keywords from 'react-keywords'; 2. Basic usage. export default function Demo() {
Dark Mode Toggle Component For React
A customizable dark mode toggle switch component for React. How to use it: 1. Install & download. npm install @anatoliygatt/dark-mode-toggle @emotion/react @emotion/styled 2. Import the DarkModeToggle component. import { useState } from 'react'; import { DarkModeToggle } from '@anatoliygatt/dark-mode-toggle'; 3. Add the dark mode toggle to the
App Introduction Carousel For React Native
An introduction page carousel (onboarding) animated with pagination. How to use it: 1. Install and import the react-native-intro-carousel. # Yarn $ yarn add react-native-intro-carousel # NPM $ npm i react-native-intro-carousel import * as React from 'react'; import { Image, StyleSheet, View } from 'react-native'; import Carousel from 'react-native-intro-carousel'; 2. The
Feature-rich Toast Notification Library For React Native
A feature-rich toast library for React Native, built on react-hot-toast. Features: Multiple toasts at the same time Keyboard handling (both iOS and Android) Swipe to dismiss Positional toasts (top & bottom) Ccustom styles, dimensions, duration, and even create your own component to be used in the toast Support
Customizable Autocomplete Search Component For React – Turnstone
A highly customizable, easy-to-use autocomplete search component for React. Features: Lightweight React search box component Group search results from multiple APIs or other data sources with customisable headings Specify the maximum number of listbox options as well as weighted display ratios for each group Completely
Autocomplete Dropdown For React Native
A dropdown item picker with search and autocomplete (typeahead) functionality for React Native. How to use it: 1. Installation. # Yarn $ yarn add react-native-autocomplete-dropdown # NPM $ npm i react-native-autocomplete-dropdown 2. Import the autocomplete dropdown component. import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'; 3. Basic usage. const [selectedItem, setSelectedItem] =