All Projects → rwu823 → React Ripples

rwu823 / React Ripples

Licence: mit
🏊 Material ripple effect. Ripples everything

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Ripples

Kau
An extensive collection of Kotlin Android Utils
Stars: ✭ 182 (+13.75%)
Mutual labels:  material, ripple
Primereact
The Most Complete React UI Component Library
Stars: ✭ 2,393 (+1395.63%)
Mutual labels:  material, ripple
Vanilla Back To Top
Simple and smooth Back To Top button
Stars: ✭ 179 (+11.88%)
Mutual labels:  material, button
ShapeView
打造万能shape,再也不用写很多xml了,可以当做TextView,Button,EditText等多种控件,方便实用
Stars: ✭ 34 (-78.75%)
Mutual labels:  ripple, button
Materialfavoritebutton
Animated favorite/star/like button
Stars: ✭ 586 (+266.25%)
Mutual labels:  material, button
Flutter Neumorphic
A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible
Stars: ✭ 988 (+517.5%)
Mutual labels:  material, button
Aiflatswitch
Nicely animated flat design switch alternative to UISwitch
Stars: ✭ 904 (+465%)
Mutual labels:  material, button
Paper Ripple
Material Design Ripple effect in pure JS & CSS.
Stars: ✭ 55 (-65.62%)
Mutual labels:  material, ripple
Material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Stars: ✭ 143 (-10.62%)
Mutual labels:  material
Graphicscontrols
Experimental GraphicsControls - Build drawn controls (Cupertino, Fluent and Material)
Stars: ✭ 149 (-6.87%)
Mutual labels:  material
Laravel5 Angular Material Starter
Get started with Laravel 5.3 and AngularJS (material)
Stars: ✭ 1,692 (+957.5%)
Mutual labels:  material
Jekyll Theme Mdui
🍷A Jekyll theme based on MDUI
Stars: ✭ 143 (-10.62%)
Mutual labels:  material
Material Dashboard
Material Frontend Preset For Laravel Framework 8.x and Up
Stars: ✭ 152 (-5%)
Mutual labels:  material
React Slack Chat
[UPDATED] A Server-less Beautiful Gooey / Material Design Slack Chat Web Integrating Widget.
Stars: ✭ 139 (-13.12%)
Mutual labels:  material
Ngrid
A angular grid for the enterprise
Stars: ✭ 157 (-1.87%)
Mutual labels:  material
Styled Icons
💅 Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components
Stars: ✭ 1,878 (+1073.75%)
Mutual labels:  material
Sharpview
安卓带有尖角气泡的控件(TextView,ImageView,EditText,Layout),支持渐变色,圆角等自定义属性
Stars: ✭ 137 (-14.37%)
Mutual labels:  button
Material
A UI/UX framework for creating beautiful applications.
Stars: ✭ 11,870 (+7318.75%)
Mutual labels:  material
Ngx Formly
JSON powered / Dynamic forms for Angular
Stars: ✭ 2,109 (+1218.13%)
Mutual labels:  material
Blazorise
Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Bulma, AntDesign, and Material.
Stars: ✭ 2,103 (+1214.38%)
Mutual labels:  material

react-ripples

Material ripple effect, ripples everywhere

Live Demo

Attraction

  • ✅ Zero dependencies
  • 🚀 Tiny and blazing fast (Pure Component)
  • ⚡ Typescript and definition file supported
  • 🎨 Pure CSS animation
  • 🌍 SSR supported

Installation

$ npm install --save react-ripples

or

$ yarn add react-ripples

Usage

import Ripples from 'react-ripples'

render() {
  <Ripples>
    <button>Ripple Button</button>
  </Ripples>
}

API

createRipples([defaultProps])

Extends default props without HOC

import { createRipples } from 'react-ripples'

const MyRipples = createRipples({
  color: 'purple',
  during: 2200,
})

Props

static propTypes = {
  during: PropTypes.number,
  color: PropTypes.string,
}

static defaultProps = {
  during: 600,
  color: 'rgba(0, 0, 0, .3)',
}
Property Description
during The css animate duration [ms]
color The ripple's background color
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].