@miner-mobile/floating-bubble
@miner-mobile/floating-bubble.
Install
Using npm:
$ npm install --save @miner-mobile/floating-bubble
or using yarn:
$ yarn add @miner-mobile/floating-bubble
Usage
import FloatingBubble from '@miner-mobile/floating-bubble';
export default () => {
return (
<div
style={{
textAlign: 'center',
}}
>
<div style={{ height: '1000px', background: '#ccc' }}></div>
<FloatingBubble
axis="xy"
magnetic="x"
style={{
'--initial-position-right': '24px',
'--initial-position-bottom': '24px',
}}
>
<div>
<img
style={{ width: '70px', height: '70px' }}
draggable={false}
src={'floatingImg'}
alt=""
/>
</div>
</FloatingBubble>
</div>
);
};
API
props
name | type | default | description |
---|---|---|---|
component | React.Element/String | 'span' | wrap dom node or component for children. set to '' if you do not wrap for only one child |