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