bassdrop

🔊 a downshift powered dropdown library for react vr

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


• Usage


• Props


• How To Render


• Examples


• Contributing


• License

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

``jsx
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 (
// 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 {(stateAndHelpers) => {...}}
render={({
// Prop getters
getItemProps,
getToggleButtonProps,
getRootProps,
// State
isOpen,
selectedItemIsHighlighted,
itemDisplay,
highlightedIndex,
selectedItem,
}) => (
// 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()}
>
// 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,
}}
>
// 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}


// This is purely presentational -- why render props rock!
style={{
paddingRight: 0.2,
paddingLeft: 0.2,
backgroundColor: 'gray',
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
}}
>
source={asset('arrow.png')}
style={{
justifyContent: 'center',
width: 0.5,
height: 0.5,
}}
/>


{isOpen ? (
// 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) => (
// Each item should be a VrButton
{...getItemProps({
item,
index,
})}
key={item}
>
// 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}


))}

) : null}

)}
/>
);
}
`


…creates something like this:




`jsx

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

`


or can be called from the render prop

`jsx
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.