From 31e84058db70454f6a7f4cb90d1824799c0c28d5 Mon Sep 17 00:00:00 2001 From: Ilia Peterov Date: Thu, 2 May 2024 17:04:38 +0400 Subject: [PATCH] Mention the className prop decision in README and offer some alternatives --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 9c6d418..a2ffd09 100644 --- a/README.md +++ b/README.md @@ -51,3 +51,12 @@ If `useCapture` is true, the event will be registered in the capturing phase and ### display: `PropTypes.oneOf(['block', 'flex', 'inline-block', 'inline', 'contents'])` By default, the `OutsideClickHandler` renders a `display: block` `
` to wrap the subtree defined by `children`. If desired, the `display` can be set to `inline-block`, `inline`, `flex`, or `contents` instead. There is no way not to render a wrapping `
`. + + +## FAQ + +### I need the className or styles props, are they available? +Those particular props are not available as a design choice, [check out this article](https://medium.com/@JanPaul123/don-t-pass-css-classes-between-components-e9f7ab192785) for more in-depth reasoning. But if the props that are available don't cover your use-case, please create an issue and describe your use-case - we will be happy to accomodate it. + +### The wrapper `
` messes with the width or height of the content inside it +Try passing the `display="contents"` prop - according to MDN, it [replaces the element box by their pseudo-box and their child boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/display#box).