0.2.6 • Published 6 years ago
react-squeezebox v0.2.6
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
import Squeezebox from 'react-squeezebox';
<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: frame.isActive || false,
// default classname for SqueezeboxElement's, ie frames.
className: frame.className || 'squeezeboxElement',
// Any single child component the frame may have.
child: frame.child || null,
// Background Image, set with CSS
image: frame.image || '',
// background Color, set with CSS, Background Image overrides.
color: frame.color || '',
// CSS Flex shorthand property for the frame,
// defaults to 1, equal widths
flex: frame.flex || 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'
}}
/>