JSPM

  • Created
  • Published
  • Downloads 22699
  • Score
    100M100P100Q143213F

swipe out ui component for react(web and react-native)

Package Exports

  • rc-swipeout
  • rc-swipeout/assets/index.css
  • rc-swipeout/lib/Swipeout

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-swipeout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rc-swipeout


iOS-style swipeout buttons that appear from behind a component (web & react-native support)

NPM version build status Test coverage

Screenshots

rc-swipeout

Installation

npm install --save rc-swipeout

Development

web: 
npm install
npm start

rn:
tnpm run rn-start

Example

Usage

import Swipeout from 'rc-swipeout';
import 'rc-swipeout/assets/index.less';

<Swipeout
  left={[
    {
      text: 'reply',
      onPress:() => console.log('reply'),
      style: { backgroundColor: 'orange', color: 'white' },
      className: 'custom-class-1'
    }
  ]}
  right={[
    {
      text: 'delete',
      onPress:() => console.log('delete'),
      style: { backgroundColor: 'red', color: 'white' },
      className: 'custom-class-2'
    }
  ]}
  onOpen={() => console.log('open')}
  onClose={() => console.log('close')}
>
  <div style={{height: 44}}> swipeout demo </div>
</Swipeout>

For the React Native version, use the following import statement.

import Swipeout from 'rc-swipeout/lib'

API

props

name description type default
prefixCls className prefix String rc-swipeout
style swipeout style Object ``
left swipeout buttons on left Array []
right swipeout buttons on right Array []
autoClose auto close on button press Boolean function() {}
onOpen Function function() {}
onClose Function function() {}
disabled disabled swipeout Boolean false

button props

name description type default
text button text String Click
style button style Object ``
onPress button press function Function function() {}
className button custom class String ``

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-swipeout is released under the MIT license.