Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

๐Ÿ”Š a downshift powered dropdown library for React VR

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published