Extending styles of sticky and top states

[ryanmcmanimie]

I know you provided the className property but I'm curious if there's a way to specifically target the states (i.e. sticky, at the top of page, etc..) as I see that you do swap the classes.

When it's at the top I wanted to drop the opacity of the background so my hero image showed through and invert the colors of my header links. I can do it fine targeting the randomly generated class names but my understanding is that they're apt to change eventually. New to styled components so perhaps I'm missing something though.

[michael-markl]

Thanks for your question!
You're not missing anything; this is currently not supported (officially) by this package.

There are three modes: Pinned, Unpinned, and Static (default)

I am wondering what the best approach would be for you to consume it.

One option would be to add a callback prop à la onModeChanged which you can use to change your styling (or whatever else you want to do). This seems like the most flexible option, but you have to "duplicate" the mode state in your own component.

Another option would be to add a classname as a prop (one for each mode) that ReactStickyHeadroom would set as additional classname to the wrapper div depending on the mode.

Do you have a preference?