(requires React version ^16.8.0)
# npm
npm i react-use-dock
# Yarn
yarn add react-use-dock
import { DockProvider } from 'react-use-dock'
function MyApp() {
return (
<DockProvider>
<Layout>
<AppContent />
</Layout>
</DockProvider>
)
}
import { Dock } from 'react-use-dock'
function Layout({ children }) {
return (
<div>
<header>
<h1>React Use Dock</h1>
</header>
<main>{children}</main>
<footer>Stuff</footer>
{/* Dock is absolutely positioned, place anywhere */}
<Dock />
</div>
)
}
import { useEffect } from 'react'
import { useDock, DockContainer } from 'react-use-dock'
function Example() {
const dock = useDock()
// provide any render function!
const render = () => (
<DockContainer onCloseDock={() => console.log('Closed dock')}>
<YourDockContent />
</DockContainer>
)
useEffect(() => {
dock.openDock({
render,
minSize: 350,
orientation: 'right',
size: 50,
})
}, [])
return (
<div>
<button onClick={dock.toggleDock}>Toggle Dock</button>
</div>
)
}
View the useDock()
api in the Docs
The Dock
component is where the render
function is called to display content.
interface DockProps {
id?: string
style?: React.CSSProperties
}
Name | Description | Default |
---|---|---|
id |
id attribute for the Docks <div> . Useful for css selection |
react-use-dock |
style | Inline styles | {} |
The DockContainer
component is a simple wrapper component that renders a close icon at the top right.
interface DockContainerProps {
children: any
onCloseDock?(): void
CloseIcon?: ReactNode
}
Name | Description | Default |
---|---|---|
children | React child components | - |
onCloseDock | Callback when dock is closed | () => {} |
CloseIcon | Custom React component for close icon | <span style={{ fontSize: '1.5em' }}>×</span> |
import { DockContainer } from 'react-use-dock'
function Example() {
return (
<DockContainer
onCloseDock={() => console.log('Closed Dock')}
CloseIcon={<span>Close Dock</span>}
>
<YourDockContent />
</DockContainer>
)
}