ladle-inject-custom-addons v0.2.0
ladle-inject-custom-addons
Ladle doesn't officially support third party addons yet. Now we can pretend it does!
Quick Start
Installation
pnpm add ladle-inject-custom-addons
Note Replace
pnpm
withyarn
ornpm
to match what you use for your project. π
Basic Usage
Add your custom button components to your global provider. You'll use the provided AddonButton
components to make buttons that match the existing Ladle addon bar buttons.
// .ladle/components.tsx
import type { GlobalProvider } from "@ladle/react"
import {
AddonButton,
AddonDialogButton,
ExampleLadleIcon,
} from "ladle-inject-custom-addons"
export const Provider: GlobalProvider = ({ children }) => (
<>
<HelloAddon />
<DialogExampleAddon />
{children}
</>
)
const HelloAddon = () => (
<AddonButton
icon={<ExampleLadleIcon />}
onClick={() => alert("hello!")}
tooltip="Shows an alert to say hello."
/>
)
const DialogExampleAddon = () => (
<AddonDialogButton icon={<ExampleLadleIcon />} tooltip="Opens a dialog box.">
<p>Custom text, or more advanced components, will show up in a dialog.</p>
</AddonDialogButton>
)
Customization
Icons
Most icon libraries will work for your addon buttons. Check out react-feather if you're not sure where to start!
You can also add your own SVGs for your icons. Use currentColor
for the stroke or fill on the icon to have it use the default hover and active colors. The icons are expected to be 24 by 24 pixels in size.
const MyIcon = () => (
<svg
width={24}
height={24}
strokeWidth={2}
viewport="0 0 24 24"
stroke="currentcolor"
>
<ellipse cx="12" cy="12" rx="10" ry="10" />
</svg>
)
Button order
If you would like to put your custom addons at a different place in the list, you can pass the position
property.
// .ladle/components.tsx
export const Provider = ({ children }) => (
<>
<AddonButton
icon={<ExampleLadleIcon />}
onClick={() => alert("hello!")}
tooltip="Shows an alert to say hello."
// This button will be third in the addon panel list:
position={3}
/>
{children}
</>
)
How this package works
AddonButton
utilizes a React Portal to mount your buttons within the existing Ladle addon list.
Warning This method of injecting components may not be very stable. Changes to the Ladle package could easily break this in future updates.
Questions or contributions
Feel free to create a new issue if you run into any problems using this package!
Contributions are also welcome. I recommend opening an issue before starting work on your addition, just mention that you're working on an addition or fix.
π«Άπ» Thanks for reading!