React: Support for classList

[GasimGasimzada]

Do you want to request a feature or report a bug?

feature

What is the current behavior?

Only className exists right now.

What is the expected behavior?

I think adding classList property for DOM elements would be useful. As far as I understand React Fire will drop support for IE11 but even in IE11, you can add or remove classList from elements.

Another idea might be adding support for for array type for className (or future class, which will make more sense because array). If array is passed, classList will be used for DOM elements. Otherwise, className is used as usual in the real DOM side.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

All versions. I hope this is added in React Fire.

[GeKorm]

Unless I'm misunderstanding, I think this is already handled perfectly by classnames (docs link) or classcat.

[nik72619c]

anyone working on this one?

[GasimGasimzada]

@GeKorm classnames and others do work but they only combine array of class names into a single string; then, you pass the string to className attribute. What I am suggesting is to use the browser's native functionality for managing array of class names: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList. This way, there won't be a need for any additional library.

[chasestarr]

@GasimGasimzada you could get a ref to the DOM node to operate on the classList, but it does not align with react's update model. Check out this for an example.

what functionality can you not support with className?

[GasimGasimzada]

@chasestarr My concern was not regarding DOM but having React DOM prop classList that allows adding classes in a list. Or allow arrays being accepted go class. I might have worded my intent wrong. Because currently we need to use a library that takes the values for array and create string to pass to array while even DOM has a functionality to accept arrays.

[giuseppeg]

@GasimGasimzada which attribute would have precedence if you have both className and classList? FWIW there is no such thing as classList attribute in HTML. FWIW2 I made a Babel plugin that allows you to pass an array of classes to className https://www.npmjs.com/package/babel-plugin-classnames

[gaearon]

Please submit an RFC for how it should work. It's not obvious to me what the design is when you mix classList with className, and what components that pass names through (but add extra ones) should do.

https://github.com/reactjs/rfcs

Thanks!