Package Exports

react-floating-ball
react-floating-ball/es/index.js
react-floating-ball/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-floating-ball) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`react-floating-ball`

A react component for floating ball

Install

// npm
npm i --save react-floating-ball
// yarn
yarn add -D react-floating-ball
// pnpm
pnpm add -D react-floating-ball

Usage

Codesandbox

// cjs
const FloatingBall = require('react-floating-ball');
// esm
import FloatingBall from 'react-floating-ball';
import React from 'react'
import ReactDOM from 'react-dom'

function App() {
  return (
    <FloatingBall
      theme='#61dafb'
      position='top left'
      column={2}
      events={[
        { icon: 'H', text: 'home', handle: (e) => console.log(e) },
        {
          icon: 'O',
          text: 'home2',
          handle: (e) => console.log(e),
        },
        {
          icon: 'M',
          text: 'home3',
          handle: (e) => console.log(e),
        }
      ]}
    />
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

DOCS

props

Name	Description	Type	default
theme	set floating ball primary color	String	#61dafb
position	set floating ball init position.(top/bottom/left/right)	String	top left
column	set floating ball column of popover.(max: 4)	Number	2
canMove	control the floating ball can move by mouse	Boolean	true
events	events will be displayed on the floating ball popover	Array	[]

EventItem props

Name	Description	Type	default
icon	event icon	String / React.ReactNode	-
text	event name	String / React.ReactNode	-
handle	event	(item: EventItem) => void	-

Provider and useFBCore()

useFBCore() hook return floating ball core instance, u can do anything of floating ball, but u must Provider wrap your component