Code Monkey home page Code Monkey logo

rn-cascade-picker's Introduction

rn-cascade-picker

A cascade picker component written in pure JavaScript for React Native

Latest Version on NPM npm github issues github closed issues

Installation

yarn add rn-cascade-picker

Peer Dependencies

"react": ">= 16.13.1",
"react-native": ">= 0.63.4"

Usage

# demo
cd example
yarn
yarn ios

demo png

demo gif

Props

Prop Type Default Description
visible Boolean false determine whether Picker is visible or not
data Array<{value, label, children: Array}> - data source
value Array - the value, the format is [value1, value2, value3], corresponds to the level value of the data source
cols Number 3 col numbers
title String - title
cancelText String cancel cancel text
confirmText String confirm confirm text
titleTextStyle Object - style of title text
cancelTextStyle Object - style of cancel text
confirmTextStyle Object - style of confirm text
onCancel (): void - cancel handler
onConfirm (val): void - confirm handler

Contribution

If you want to add some features, feel free to submit PR.

License

MIT.

rn-cascade-picker's People

Contributors

yorickshan avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

paache iqidan

rn-cascade-picker's Issues

The Cascade Picker doesn't scroll and just returns back to the first value.

Whenever i drag the cascade picker to scroll it doesn't scroll and just returns back to its position.
https://user-images.githubusercontent.com/46707661/170863379-de406ca8-f320-48f9-bc31-409be3ab3ac1.mp4
This is my code:
<CascadePicker visible={pickerVisible} data={carData} cols={4} title="Select Car" cancelText="cancel" confirmText = "confirm" value={['1', '2', '3', '4']} onCancel={() => setPickerVisible(false)} onConfirm={(val) => { console.log(val) setPickerVisible(false) }} />

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.