react-buckets

Some layout or interactive components based React.

Buckets

import { Buckets } from 'react-buckets'

export default ({ preset = [] }) => {
    const [_preset, setPreset] = useState(preset)

    return (
        <Buckets
            preset={_preset}
            size={300}
            space={4}
            handleSize={10}
            onChange={preset => {
                setPreset(preset)
            }}
            handleStyle={{
                backgroundColor: 'rgba(0,0,0,0.1)',
            }}
            bucketStyle={({ head, tail, index }) => {
                const style = {
                    backgroundColor: '#fff',
                }
                return style
            }}
            activeHandleStyle={{
                backgroundColor: 'rgba(0,0,0,0.3)',
            }}
        >
            <div style={{ textAlign: 'center', border: '1px solid #666', padding: '30px 0' }}>1</div>
            <div style={{ textAlign: 'center', border: '1px solid #666', padding: '40px 0' }}>2</div>
            <div style={{ textAlign: 'center', border: '1px solid #666', padding: '60px 0' }}>3</div>
        </Buckets>
    )
}

size [number]

The layout container height.

space [number]

The space size between each bucket.

handleSize [number]

The width of then resizing handle.

bucketStyle [Object | Function]

Define the custom style of the buckets. It could be a standard css-object, or a callback function like

<Buckets
    handleStyle={
        ({ head, tail, index }) => {
            return head ? {
                backgroundColor: '#f00',
            } : tail ? {
                backgroundColor: '#00f',
            } : {
                backgroundColor: '#0f0'
            }
        }
    }
/>

The argument structure of the callback function means

• index: the current index of the elements
• head: index === 0
• tail: index === elements.length - 1

handleStyle [Object | Function]

Define the custom style of the handles.

Take a look at bucketStyle.

activeHandleStyle [Object | Function]

Define the custom style of the operating handle.

Take a look at bucketStyle.

onChange [Function]

Define the callback function invoked when the operation is end.