bassdrop

    0.0.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    bassdrop
    bassdrop logo

    ūüĒä a downshift powered dropdown library for react vr


    Travis npm GitHub Issues Coverage Styled with Prettier README generated by emdaer
    Twitter GitHub stars

    bassdrop is a downshiftūüŹéÔłŹ powered dropdown library for building drop downs and select lists in react vr. It uses the function as child and ‚Äúprop getter‚ÄĚ patterns, which gives you maximum flexibility with a minimal API.

    Table of Contents

    Installation

    This module is distributed via npm which is bundled with node and should be installed as one of your project’s dependencies:

    
    npm install --save bassdrop
    

    This package also depends on react-vr, prop-types and react. Please make sure you have those installed as well.

    Usage

    import BassDrop from 'bassdrop';
    import { Text, View, VrButton, Animated } from 'react-vr';
     
    // Small helper function to choose item bg color.
    function getDropdownItemBgColor(selectedItem, item, highlightedIndex, index) {
      if (selectedItem === item) {
        return 'gray';
      }
      if (highlightedIndex === index) {
        return 'lightgray';
      }
      return 'white';
    }
     
    function VrDropdown({ items, placeholder }) {
      return (
        <BassDrop
          // The string to show when no item is selected/highlighted. Defaults to ''.
          placeholder={placeholder}
          // The render prop is called on each render providing prop getters and state to be used in your UI.
          // This function can alternatively be called as a child prop <BassDrop>{(stateAndHelpers) => {...}}</BassDrop>
          render={({
            // Prop getters
            getItemProps,
            getToggleButtonProps,
            getRootProps,
            // State
            isOpen,
            selectedItemIsHighlighted,
            itemDisplay,
            highlightedIndex,
            selectedItem,
          }) => (
            <View
              // This is the main wrapper View for the dropdown
              style={{
                position: 'absolute',
                layoutOrigin: [0.5, 0.5],
                transform: [{ translate: [0, 0, -3] }],
              }}
              billboarding={'on'}
              {...getRootProps()}
            >
              <VrButton
                // This button will control toggling the dropdown open/closed
                {...getToggleButtonProps()}
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  backgroundColor: 'white',
                  justifyContent: 'space-between',
                  alignItems: 'stretch',
                  height: 0.7,
                  width: 3,
                  paddingLeft: 0.2,
                }}
              >
                <Text
                  // This text represents the value or the highlighted value for the dropdown
                  style={{
                    backgroundColor: 'white',
                    color: selectedItemIsHighlighted ? 'black' : 'grey',
                    fontSize: 0.3,
                    fontWeight: '400',
                    textAlign: 'center',
                    textAlignVertical: 'center',
                  }}
                >
                  {itemDisplay}
                </Text>
     
                <View
                  // This is purely presentational -- why render props rock!
                  style={{
                    paddingRight: 0.2,
                    paddingLeft: 0.2,
                    backgroundColor: 'gray',
                    display: 'flex',
                    alignItems: 'center',
                    flexDirection: 'row',
                  }}
                >
                  <Image
                    source={asset('arrow.png')}
                    style={{
                      justifyContent: 'center',
                      width: 0.5,
                      height: 0.5,
                    }}
                  />
                </View>
              </VrButton>
              {isOpen ? (
                <View
                  // The list of items to be shown when the dropdown is open
                  style={{
                    width: 3,
                    backgroundColor: 'white',
                    transform: [
                      {
                        translate: [0, -1.3, -0.3],
                      },
                    ],
                  }}
                >
                  {items.map((item, index) => (
                    <VrButton
                      // Each item should be a VrButton
                      {...getItemProps({
                        item,
                        index,
                      })}
                      key={item}
                    >
                      <Text
                        // This is the text for the item
                        style={{
                          fontSize: 0.3,
                          padding: 0.1,
                          textAlign: 'center',
                          textAlignVertical: 'center',
                          color: 'black',
                          backgroundColor: getDropdownItemBgColor(
                            selectedItem,
                            item,
                            highlightedIndex,
                            index
                          ),
                        }}
                      >
                        {item}
                      </Text>
                    </VrButton>
                  ))}
                </View>
              ) : null}
            </View>
          )}
        />
      );
    }

    …creates something like this:

    bassdrop dropdown example

    Props

    See the API Docs for information on the props exposed by this package. The usage example above is not an exhaustive list.

    How To Render

    bassdrop ūüĒä uses the child callback render function pattern. This is where you render whatever you want to based on the state of bassdrop which is passed to the callback as parameters. The function is passed as the child prop of the BassDrop component:

    <BassDrop>
      {({/* parameters here */}) => (/* your render code here*/)}
    </BassDrop>

    or can be called from the render prop

    <BassDrop
      render= {({/* parameters here */}) => (/* your render code here*/)}
    />

    The paramters of this function can be split into two categories: State and Prop Getters.

    See the API Docs for a list of these properties.

    Examples

    Check out the demo site to see how bassdrop ūüĒä works in VR. See the demo repo for the code behind the demo site.

    Contributing

    If you‚Äôd like to make bassdrop ūüĒä better, please read our guide to contributing.

    These wonderful people have contributed to bassdrop ūüĒä in one way or another:

    Contributors
    Luke Herrington

    License

    bassdrop is MIT licensed.

    Install

    npm i bassdrop

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    752 kB

    Total Files

    8

    Last publish

    Collaborators

    • infiniteluke