Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hello,
I was having an issue with #147, especially for show / hide and animations, so I wrote this workaround (fix?).
This probably isnt a contender for being merged, as it is specifically a workaround for react, and requires it as a dependancy. But I thought it might be useful for someone, or maybe for an "react-aphrodite" repo of some kind.
criticalStyles
higher order component.Can be imported via:
and allows you to provide any number of critical styles to be added to the stylesheet before render.
Usage
Can be used to create critical styles either before render, or on require.
Single style:
This results in the equivelent of
css(styles.needed_style)
Multiple styles:
This results in the equivelent of
css(styles.needed_style) css(styles.more_styles)
and is intended for multiple classes within the same component.Multiple styles in one class:
This results in the equivelent of
css(styles.base_style, styles.extension_styles)
.Styles dependant on props.
All previous ways add the style on require, however, as props arent known on require, this will delay rendering of the component until the styles are added to the sheet.
Mixed
Some examples:
(All screen captures have been paused on modification of stylesheet, as framerate was too low to show flash of unstyled content)
Rendering a previously unseen component:
Before:
The component enters unstyled.
After:
The component enters with the minimum amount of styling to be viable already in the stylesheet, as specified.
Transitions.
Before:
The component enters unstyled, and is styled too late to transition to its final state. It exits unstyled, once again too late to transition. Subsiquent transitions work as expected.
After:
All animation styles are applied before the component is rendered, allowing it to transition between each.
- George