React Squeezebox
About
React Squeezebox is a lightweight and versatile 'accordion-style' flexbox container built for React. React Squeezebox makes it easy to create collapsible 'panes' that can hold other component, images, text and much more!
View the Demo & Get Started!
Installing
$ npm install react-squeezebox
Usage
; <Squeezebox className={} style={} frames={}{} settings={} />
Properties and Attributes:
className & style
The CSS Class name of the Squeezebox container. And / Or, use the Inline style of the Squeezebox container (div)
Frames
An Array of
frame
objects, each representing a different flex panel.
frame
frame = // Frames are not active ie Expanded by default isActive: frameisActive || false // default classname for SqueezeboxElement's, ie frames. className: frameclassName || 'squeezeboxElement' // Any single child component the frame may have. child: framechild || null // Background Image, set with CSS image: frameimage || '' // background Color, set with CSS, Background Image overrides. color: framecolor || '' // CSS Flex shorthand property for the frame, // defaults to 1, equal widths flex: frameflex || 1
Settings
Settings of the behavior of the squeezebox component
settings = // Should the previously active frames close when a new frame is opened ? shouldCloseActiveElement: false // Default Flexbox Flex property for each frame frameFlex: 1 // How much should each frame expand when open? frameExpansion: 15 // CSS Transition when the frame becomes active: // Here are some Built in types, // switch(transition) { // case 'slam': // return `flex 0.3s cubic-bezier(.85,.66,0,.1)` // case 'fast': // return `flex 0.3s cubic-bezier(.55,.62,.06,.86)` // case 'linear': // return `flex 0.5s cubic-bezier(0,0,1,1)` // case 'ease': // return `flex 0.5s cubic-bezier(0.25,0.1,0.25,1))` // case 'ease-in': // return `flex 0.5s cubic-bezier(0.42,0,1,1)` // case 'ease-out': // return `flex 0.5s cubic-bezier(0,0,0.58,1)` // default: // return transition //} //You can define your own, i.e. //transition: 'flex 0.5s cubic-bezier(0,0,0.58,1)' //Otherwise the transition will be immediate! transition: 'ease-out'
Example
<Squeezebox className='yourClassName' style= height: '33vh' frames= color: '#FF2222' className: 'someclass' child: <MyChildComponent /> color: '#FF2222' // Images override color image: './imgs/rainbow/green.png' image: './imgs/rainbow/blue.png' isActive: true image: './imgs/rainbow/red.png' settings = shouldCloseActiveElement: true frameFlex: 1 frameExpansion: 10 transition: 'fast' />