Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Class References

CircleCI codecov npm GitHub lerna Greenkeeper badge

Stop worrying about edge cases when you add and remove classes.


Class names on global elements can come from a lot of places. Knowing when a class is actually safe to remove can be tricky.

Say you have a modal dialog component. When that component is shown, you might want to stop the user from scrolling the content behind the dialog. To do that, you add a class called u-preventScroll (with corresponding CSS that sets overflow: hidden;) to the body element. When the dialog closes, you remove the class. Hey, that works great!

Except when it doesn't. What if you had two dialog components open at the same time? When the second one closes, it removes u-preventScroll, but the first dialog is still open. And now your users can scroll the page.

Enter class-references. Rather than adding a class name to an element directly, a component can exchange a request to add a class name for a token from class-references. When a component is ready to remove that class, the component can release the token. The class only gets removed when all tokens have been released.

Put more simply: you can stop worrying about edge cases when you're adding and removing class names to global elements.


Framework agnostic

See class-references.


See react-class-references.