@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