igordanchenko/yet-another-react-lightbox

Adding documentation for adding toolbar buttons

BradWells opened this issue · 1 comments

BradWells commented

Is your feature request related to a problem? Please describe.

Adding custom toolbar buttons is relatively easy, but not described in the YARL documentation website (that I could find)

Describe the solution you'd like

On the customization page, between Styling and Custom Icons, add a new section called Adding Toolbar Buttons:

To add a button, add a JSX element to the buttons property of the toolbar prop. Be sure to add the string "close" if you want to keep the close button. If you have included any plugins, those buttons will be prepended to the front of the buttons list in the order of the Plugins prop array.

If you need to access information about the current slide when your button is clicked, see the Toolbar Buttons section of the Advanced API documentation

<Lightbox
  toolbar={{
    buttons: [
      <button type="button" className="yarl__button">
        hi
      </button>,
      "close",
    ],
  }}
</Lightbox>

(I'd do a PR myself, but I couldn't find the source of the documentation in Github)

Describe alternatives you've considered

No response

Additional context

No response

igordanchenko commented

Great suggestion! I've added toolbar customization section to the documentation.

https://yet-another-react-lightbox.com/customization#AddingToolbarButtons

P.S. I'll work on extracting documentation into this repo. Please check back soon.

  • 🎉1