yansusanto
/ convertToPercent
Created
March 13, 2023 01:37
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const data = [ | |
| { | |
| name: 'Cluster 1', | |
| value: 210, | |
| }, | |
| { | |
| name: 'Cluster 2', | |
| value: 30, | |
| }, | |
| { |
yansusanto
/ onScroll
Last active
September 10, 2023 08:52
On scroll effect based on the percentage of viewport height
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const [inView, setInView] = React.useState(false); | |
| React.useEffect(() => { | |
| const handleScroll = () => { | |
| const scrollThresholdVH = 30; | |
| if (window.scrollY > (window.innerHeight * scrollThresholdVH) / 100) { | |
| setInView(true); | |
| } else { | |
| setInView(false); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Variables | |
| // | |
| // Variables should follow the `$component-state-property-size` formula for | |
| // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. | |
| // Color system | |
| // scss-docs-start gray-color-variables | |
| $white: #fff !default; | |
| $gray-100: #f8f9fa !default; |
OlderNewer