React-modal: Problems when using an object for the className

[Tydax]

Summary:

Hello there. I have been facing some issues when trying to use an object as a prop the className in the modal.
Apparently, the object is not properly translated into a string.

Steps to reproduce:

1. Use an object for the className prop. For example:

<Modal
  className={{
    base: 'react-modal-container',
    afterOpen: '-after-open',
    beforeClose: '-before-close',
  }}
/>

1. When inspecting the element in a browser, the div is given that className: ReactModal__Content ReactModal__Content--after-open [object Object]

Expected behavior:

The object should be transformed appropriately into a string.

[vasco-santos]

I am facing the same problem as described by @Tydax

[jimulle]

Same issue here too

[teameh]

Same here, but it works if you just provide a single string instead of an object though!

[diasbruno]

Hi @teameh @vasco-santos @jimbolla @Tydax, can you tell which version?

[teameh]

Latest version, just freshly installed. 1.7.7

[diasbruno]

<Modal
  className={{
    base: 'react-modal-container',
    afterOpen: '-after-open',
    beforeClose: '-before-close',
  }}
/>

feature is available on the master branch. All versions v1.x.y are released from the branch/v1 which will be discontinued when the documentation and some 'modernization' of the source code are finished.

The commit/6442387b4d7 on master introduces this feature (which needs a backport to branch/v1 ).

[plemarquand]

Can I suggest the default github branch be set to v1 until the new code on master is released?

My first instinct when pulling the latest release over npm is that the documentation on github matches my release. I got bit by this bug because I was coding against the documentation (and source code) on the master branch without realizing I was running code in the v1 branch.

[diasbruno]

@plemarquand Fair enough. cc @claydiffrient.

[diasbruno]

@plemarquand @teameh @jimulle @Tydax @vasco-santos v2.0.0 has been released, so this is now available. master branch is now up-to-date. Thank you.