Skip to content

jstephancc/swipeout

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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' }
    }
  ]}
  right={[
    {
      text: 'delete',
      onPress:() => console.log('delete'),
      style: { backgroundColor: 'red', color: 'white' }
    }
  ]}
  onOpen={() => console.log('open')}
  onClose={() => console.log('close')}
>
  <div style={{height: 44}}> swipeout demo </div>
</Swipeout>

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() {}

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-swipeout is released under the MIT license.

About

React Swipeout(web & react-native)

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 95.0%
  • CSS 5.0%