0.0.1 • Published 4 years ago

@reactuniversal/ripple v0.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

A React Material Ripple component that works on the Web, Android, iOS, Electron, and anywhere else React Native is supported. This component is a part of the React Universal ecosystem of universal React and React Native components. Checkout the React Universal docs to learn more.

Storybook Demos

Installation

npm i @reactuniversal/ripple --save

Example

import React from 'react';
import { View, Text } from 'react-native';
import Ripple from '@reactuniversal/ripple';

export default function Page() {
    return (
      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
        <Ripple
          rippleColor={'blue'}
          style={{
            width: 180,
            height: 250,
          }}>
          <Text>Click Me</Text>
        </Ripple>
      </View>
    );
}`;

Props

NameDescriptionTypeDefault
displayUntilPressOutKeep ripple at full size while holding pressbooltrue
disabledDisables ripplebool
onPressCallback on ripplefunc
rippleCenteredWhether the ripple starts at the center of the component or where you clickedboolfalse
rippleColorColor of ripplestringrgba(0, 0, 0, .87)
rippleContainerBorderRadiusBorder Radius of ripplenumber0
rippleDurationAnimation Duration of ripple to fill the entire componentduration400
rippleOpacityOpacity of ripplenumber0.3
rippleSizeDetermines the size of ripplenumber0
rippleSequentialRipple should start in sequenceboolfalse
styleStyles root elementobject