@khaledz370/popuppicker-react-native NPM

Crafty-app

Made by Crafty-app

A Popup picker

A Popup item selector

Installation

npm:

  npm i @khaledz370/popuppicker-react-native

yarn:

  yarn add @khaledz370/popuppicker-react-native

Usage

List of possible values:

align:

    Change the title and the popuplist button flexDirection
    type enum 'column' | 'row' | 'row-reverse'| 'column-reverse'
    default "column"

title:

   Sets the title name
   type string
   default "Select"

data:

    An array of list values must be in [{text:'',value:''}] form
    type array
    default []

search:

   Enable search through data
   type boolean
   default false

value:

   set the selected value
   type string or number
   default null

titleColor:

  Change the color of the title
  type color
  default "black"

selectedColor

  Change the color of the button
  type color
  default "black"

titleAlign

  Set title align
  type enum 'center' | 'left' | 'right'
  default "center"

fontSize:

  change font size for the title and list and button
  type number
  default 18

onSelect:

  returns the value and the text

Usage/Examples

Slider basic example

import PopupPicker from "@khaledz370/popup-picker";

const data = [
  {text:"text1",value:"value1"}
  {text:"text2",value:"value1"}
  {text:"text3",value:"value3"}
  ]

export default function App() {
  const [value, setValue] = useState('value2');
  const [text, setText] = useState('text2');
  return (
    <PopupPicker
      search={true}
      title={'values'}
      data={data}
      value={value}
      selectedColor="purple"
      titleColor="red"
      // you can use value and text
      onSelect={(value, text) => {
        setValue(value);
        setText(text);
      }}
      // or you can ignore text
      onSelect={value => {
        setValue(value);
      }}
    />
  );
}