react.dev
react.dev copied to clipboard
reactjs
hide social banner on scroll
Addressing this issues "The "Support Ukraine 🇺🇦" banner should disappear when scrolling" #4619
I simply added event listener to the SocialBanner component. It behaves the same way as a https://reactnative.dev React Native's website's Social banner, it disappears when we scroll down on the page.
https://user-images.githubusercontent.com/63287548/171123668-17773601-1157-478b-ab4b-bc6592503208.mov
Size Changes
📦 Next.js Bundle Analysis
This analysis was generated by the next.js bundle analysis action 🤖
🎉 Global Bundle Size Decreased
| Page | Size (compressed) |
|---|---|
global |
84.58 KB (-2 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
One Hundred Eighty-nine Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
47.99 KB (🟡 +79 B) |
132.57 KB |
/404 |
47.09 KB (🟡 +79 B) |
131.67 KB |
/apis |
47.87 KB (🟡 +79 B) |
132.45 KB |
/apis/createcontext |
49.62 KB (🟡 +79 B) |
134.2 KB |
/apis/reactdom |
47.81 KB (🟡 +79 B) |
132.39 KB |
/apis/render |
49.85 KB (🟡 +79 B) |
134.43 KB |
/apis/usecontext |
55.58 KB (🟡 +79 B) |
140.16 KB |
/apis/usereducer |
55.21 KB (🟡 +79 B) |
139.79 KB |
/apis/useref |
52.92 KB (🟡 +79 B) |
137.5 KB |
/apis/usestate |
58.85 KB (🟡 +79 B) |
143.43 KB |
/blog |
40.44 KB (🟡 +79 B) |
125.02 KB |
/blog/2013/06/02/jsfiddle-integration |
57.9 KB (🟡 +79 B) |
142.48 KB |
/blog/2013/06/05/why-react |
59.63 KB (🟡 +79 B) |
144.21 KB |
/blog/2013/06/12/community-roundup |
59.33 KB (🟡 +79 B) |
143.91 KB |
/blog/2013/06/19/community-roundup-2 |
59.99 KB (🟡 +79 B) |
144.57 KB |
/blog/2013/06/21/react-v0-3-3 |
58.04 KB (🟡 +79 B) |
142.62 KB |
/blog/2013/06/27/community-roundup-3 |
60.36 KB (🟡 +79 B) |
144.94 KB |
/blog/2013/07/02/react-v0-4-autobind-by-default |
58.66 KB (🟡 +79 B) |
143.24 KB |
/blog/2013/07/03/community-roundup-4 |
59.73 KB (🟡 +79 B) |
144.31 KB |
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values |
58.54 KB (🟡 +79 B) |
143.12 KB |
/blog/2013/07/17/react-v0-4-0 |
59.25 KB (🟡 +79 B) |
143.83 KB |
/blog/2013/07/23/community-roundup-5 |
60.12 KB (🟡 +79 B) |
144.7 KB |
/blog/2013/07/26/react-v0-4-1 |
58.01 KB (🟡 +79 B) |
142.59 KB |
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails |
58.61 KB (🟡 +79 B) |
143.19 KB |
/blog/2013/08/05/community-roundup-6 |
59.42 KB (🟡 +79 B) |
144 KB |
/blog/2013/08/19/use-react-and-jsx-in-python-applications |
58.63 KB (🟡 +79 B) |
143.21 KB |
/blog/2013/08/26/community-roundup-7 |
59.59 KB (🟡 +79 B) |
144.17 KB |
/blog/2013/09/24/community-roundup-8 |
61.02 KB (🟡 +79 B) |
145.6 KB |
/blog/2013/10/03/community-roundup-9 |
59.95 KB (🟡 +79 B) |
144.53 KB |
/blog/2013/10/16/react-v0.5.0 |
59.64 KB (🟡 +79 B) |
144.22 KB |
/blog/2013/10/29/react-v0-5-1 |
58 KB (🟡 +79 B) |
142.58 KB |
/blog/2013/11/06/community-roundup-10 |
61.62 KB (🟡 +79 B) |
146.19 KB |
/blog/2013/11/18/community-roundup-11 |
60.7 KB (🟡 +79 B) |
145.27 KB |
/blog/2013/12/18/react-v0.5.2-v0.4.2 |
58.47 KB (🟡 +79 B) |
143.05 KB |
/blog/2013/12/19/react-v0.8.0 |
58.89 KB (🟡 +79 B) |
143.47 KB |
/blog/2013/12/23/community-roundup-12 |
60.35 KB (🟡 +79 B) |
144.93 KB |
/blog/2013/12/30/community-roundup-13 |
60.13 KB (🟡 +79 B) |
144.71 KB |
/blog/2014/01/02/react-chrome-developer-tools |
58.39 KB (🟡 +79 B) |
142.97 KB |
/blog/2014/01/06/community-roundup-14 |
59.73 KB (🟡 +79 B) |
144.31 KB |
/blog/2014/02/05/community-roundup-15 |
60.95 KB (🟡 +79 B) |
145.53 KB |
/blog/2014/02/15/community-roundup-16 |
60.66 KB (🟡 +79 B) |
145.23 KB |
/blog/2014/02/16/react-v0.9-rc1 |
61.06 KB (🟡 +79 B) |
145.64 KB |
/blog/2014/02/20/react-v0.9 |
61.51 KB (🟡 +79 B) |
146.09 KB |
/blog/2014/02/24/community-roundup-17 |
60.37 KB (🟡 +79 B) |
144.95 KB |
/blog/2014/03/14/community-roundup-18 |
61.34 KB (🟡 +79 B) |
145.92 KB |
/blog/2014/03/19/react-v0.10-rc1 |
59.65 KB (🟡 +79 B) |
144.22 KB |
/blog/2014/03/21/react-v0.10 |
59.67 KB (🟡 +79 B) |
144.25 KB |
/blog/2014/03/28/the-road-to-1.0 |
59.78 KB (🟡 +79 B) |
144.36 KB |
/blog/2014/04/04/reactnet |
58.42 KB (🟡 +79 B) |
143 KB |
/blog/2014/05/06/flux |
58.55 KB (🟡 +79 B) |
143.13 KB |
/blog/2014/05/29/one-year-of-open-source-react |
58.77 KB (🟡 +79 B) |
143.35 KB |
/blog/2014/06/27/community-roundup-19 |
60.31 KB (🟡 +79 B) |
144.89 KB |
/blog/2014/07/13/react-v0.11-rc1 |
60.7 KB (🟡 +79 B) |
145.28 KB |
/blog/2014/07/17/react-v0.11 |
61.95 KB (🟡 +79 B) |
146.53 KB |
/blog/2014/07/25/react-v0.11.1 |
58.9 KB (🟡 +79 B) |
143.48 KB |
/blog/2014/07/28/community-roundup-20 |
60.46 KB (🟡 +79 B) |
145.04 KB |
/blog/2014/07/30/flux-actions-and-the-dispatcher |
60.09 KB (🟡 +79 B) |
144.67 KB |
/blog/2014/08/03/community-roundup-21 |
60.13 KB (🟡 +79 B) |
144.71 KB |
/blog/2014/09/03/introducing-the-jsx-specification |
58.13 KB (🟡 +79 B) |
142.71 KB |
/blog/2014/09/12/community-round-up-22 |
60.61 KB (🟡 +79 B) |
145.18 KB |
/blog/2014/09/16/react-v0.11.2 |
58.9 KB (🟡 +79 B) |
143.48 KB |
/blog/2014/09/24/testing-flux-applications |
62.08 KB (🟡 +79 B) |
146.66 KB |
/blog/2014/10/14/introducing-react-elements |
61.04 KB (🟡 +79 B) |
145.62 KB |
/blog/2014/10/16/react-v0.12-rc1 |
61 KB (🟡 +79 B) |
145.58 KB |
/blog/2014/10/17/community-roundup-23 |
61.57 KB (🟡 +79 B) |
146.15 KB |
/blog/2014/10/27/react-js-conf |
58.18 KB (🟡 +79 B) |
142.75 KB |
/blog/2014/10/28/react-v0.12 |
60.94 KB (🟡 +79 B) |
145.52 KB |
/blog/2014/11/24/react-js-conf-updates |
58.56 KB (🟡 +79 B) |
143.14 KB |
/blog/2014/11/25/community-roundup-24 |
61.8 KB (🟡 +79 B) |
146.38 KB |
/blog/2014/12/18/react-v0.12.2 |
58.59 KB (🟡 +79 B) |
143.17 KB |
/blog/2014/12/19/react-js-conf-diversity-scholarship |
58.99 KB (🟡 +79 B) |
143.56 KB |
/blog/2015/01/27/react-v0.13.0-beta-1 |
59.95 KB (🟡 +79 B) |
144.53 KB |
/blog/2015/02/18/react-conf-roundup-2015 |
61.94 KB (🟡 +79 B) |
146.52 KB |
/blog/2015/02/20/introducing-relay-and-graphql |
61.09 KB (🟡 +79 B) |
145.67 KB |
/blog/2015/02/24/react-v0.13-rc1 |
59.99 KB (🟡 +79 B) |
144.57 KB |
/blog/2015/02/24/streamlining-react-elements |
62.54 KB (🟡 +79 B) |
147.12 KB |
/blog/2015/03/03/react-v0.13-rc2 |
59.33 KB (🟡 +79 B) |
143.91 KB |
/blog/2015/03/04/community-roundup-25 |
60.29 KB (🟡 +79 B) |
144.87 KB |
/blog/2015/03/10/react-v0.13 |
60.61 KB (🟡 +79 B) |
145.18 KB |
/blog/2015/03/16/react-v0.13.1 |
58.43 KB (🟡 +79 B) |
143 KB |
/blog/2015/03/19/building-the-facebook-news-feed-with-relay |
61.18 KB (🟡 +79 B) |
145.76 KB |
/blog/2015/03/26/introducing-react-native |
58.32 KB (🟡 +79 B) |
142.9 KB |
/blog/2015/03/30/community-roundup-26 |
60.25 KB (🟡 +79 B) |
144.83 KB |
/blog/2015/04/17/react-native-v0.4 |
59.17 KB (🟡 +79 B) |
143.75 KB |
/blog/2015/04/18/react-v0.13.2 |
58.5 KB (🟡 +79 B) |
143.08 KB |
/blog/2015/05/01/graphql-introduction |
63 KB (🟡 +79 B) |
147.57 KB |
/blog/2015/05/08/react-v0.13.3 |
58.39 KB (🟡 +79 B) |
142.97 KB |
/blog/2015/05/22/react-native-release-process |
58.54 KB (🟡 +79 B) |
143.12 KB |
/blog/2015/06/12/deprecating-jstransform-and-react-tools |
59 KB (🟡 +79 B) |
143.57 KB |
/blog/2015/07/03/react-v0.14-beta-1 |
60.5 KB (🟡 +79 B) |
145.08 KB |
/blog/2015/08/03/new-react-devtools-beta |
59.11 KB (🟡 +79 B) |
143.69 KB |
/blog/2015/08/11/relay-technical-preview |
59.17 KB (🟡 +79 B) |
143.75 KB |
/blog/2015/08/13/reacteurope-roundup |
60.76 KB (🟡 +79 B) |
145.34 KB |
/blog/2015/09/02/new-react-developer-tools |
58.52 KB (🟡 +79 B) |
143.1 KB |
/blog/2015/09/10/react-v0.14-rc1 |
64.21 KB (🟡 +79 B) |
148.79 KB |
/blog/2015/09/14/community-roundup-27 |
60.68 KB (🟡 +79 B) |
145.26 KB |
/blog/2015/10/01/react-render-and-top-level-api |
59.66 KB (🟡 +79 B) |
144.23 KB |
/blog/2015/10/07/react-v0.14 |
64.69 KB (🟡 +79 B) |
149.27 KB |
/blog/2015/10/19/reactiflux-is-moving-to-discord |
60.41 KB (🟡 +79 B) |
144.99 KB |
/blog/2015/10/28/react-v0.14.1 |
58.42 KB (🟡 +79 B) |
143 KB |
/blog/2015/11/02/react-v0.14.2 |
58.45 KB (🟡 +79 B) |
143.03 KB |
/blog/2015/11/18/react-v0.14.3 |
58.57 KB (🟡 +79 B) |
143.15 KB |
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship |
59.44 KB (🟡 +79 B) |
144.02 KB |
/blog/2015/12/16/ismounted-antipattern |
59.04 KB (🟡 +79 B) |
143.62 KB |
/blog/2015/12/18/react-components-elements-and-instances |
62.96 KB (🟡 +79 B) |
147.54 KB |
/blog/2015/12/29/react-v0.14.4 |
58.24 KB (🟡 +79 B) |
142.82 KB |
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A |
59.25 KB (🟡 +79 B) |
143.83 KB |
/blog/2016/01/12/discontinuing-ie8-support |
58.07 KB (🟡 +79 B) |
142.64 KB |
/blog/2016/02/19/new-versioning-scheme |
59.45 KB (🟡 +79 B) |
144.02 KB |
/blog/2016/03/07/react-v15-rc1 |
62.2 KB (🟡 +79 B) |
146.78 KB |
/blog/2016/03/16/react-v15-rc2 |
59.06 KB (🟡 +79 B) |
143.64 KB |
/blog/2016/03/29/react-v0.14.8 |
58.2 KB (🟡 +79 B) |
142.77 KB |
/blog/2016/04/07/react-v15 |
66.38 KB (🟡 +79 B) |
150.96 KB |
/blog/2016/04/08/react-v15.0.1 |
58.95 KB (🟡 +79 B) |
143.53 KB |
/blog/2016/07/11/introducing-reacts-error-code-system |
58.66 KB (🟡 +79 B) |
143.24 KB |
/blog/2016/07/13/mixins-considered-harmful |
66.81 KB (🟡 +79 B) |
151.39 KB |
/blog/2016/07/22/create-apps-with-no-configuration |
62.14 KB (🟡 +79 B) |
146.72 KB |
/blog/2016/08/05/relay-state-of-the-state |
62.18 KB (🟡 +79 B) |
146.76 KB |
/blog/2016/09/28/our-first-50000-stars |
63.63 KB (🟡 +79 B) |
148.21 KB |
/blog/2016/11/16/react-v15.4.0 |
61.58 KB (🟡 +79 B) |
146.16 KB |
/blog/2017/04/07/react-v15.5.0 |
62.15 KB (🟡 +79 B) |
146.73 KB |
/blog/2017/05/18/whats-new-in-create-react-app |
61.54 KB (🟡 +79 B) |
146.12 KB |
/blog/2017/06/13/react-v15.6.0 |
60.17 KB (🟡 +79 B) |
144.75 KB |
/blog/2017/07/26/error-handling-in-react-16 |
60.51 KB (🟡 +79 B) |
145.09 KB |
/blog/2017/09/08/dom-attributes-in-react-16 |
60.95 KB (🟡 +79 B) |
145.52 KB |
/blog/2017/09/25/react-v15.6.2 |
59.28 KB (🟡 +79 B) |
143.86 KB |
/blog/2017/09/26/react-v16.0 |
64.41 KB (🟡 +79 B) |
148.99 KB |
/blog/2017/11/28/react-v16.2.0-fragment-support |
62.34 KB (🟡 +79 B) |
146.92 KB |
/blog/2017/12/07/introducing-the-react-rfc-process |
58.87 KB (🟡 +79 B) |
143.44 KB |
/blog/2017/12/15/improving-the-repository-infrastructure |
74.65 KB (🟡 +79 B) |
159.23 KB |
/blog/2018/03/01/sneak-peek-beyond-react-16 |
58.82 KB (🟡 +79 B) |
143.4 KB |
/blog/2018/03/27/update-on-async-rendering |
64.06 KB (🟡 +79 B) |
148.64 KB |
/blog/2018/03/29/react-v-16-3 |
60.88 KB (🟡 +79 B) |
145.46 KB |
/blog/2018/05/23/react-v-16-4 |
61.02 KB (🟡 +79 B) |
145.6 KB |
/blog/2018/06/07/you-probably-dont-need-derived-state |
64.68 KB (🟡 +79 B) |
149.26 KB |
/blog/2018/08/01/react-v-16-4-2 |
59.67 KB (🟡 +79 B) |
144.25 KB |
/blog/2018/09/10/introducing-the-react-profiler |
61.28 KB (🟡 +79 B) |
145.86 KB |
/blog/2018/10/01/create-react-app-v2 |
61.76 KB (🟡 +79 B) |
146.34 KB |
/blog/2018/10/23/react-v-16-6 |
60.96 KB (🟡 +79 B) |
145.54 KB |
/blog/2018/11/13/react-conf-recap |
58.67 KB (🟡 +79 B) |
143.25 KB |
/blog/2018/11/27/react-16-roadmap |
64.86 KB (🟡 +79 B) |
149.44 KB |
/blog/2018/12/19/react-v-16-7 |
59.79 KB (🟡 +79 B) |
144.37 KB |
/blog/2019/02/06/react-v16.8.0 |
62.06 KB (🟡 +79 B) |
146.64 KB |
/blog/2019/02/23/is-react-translated-yet |
61.62 KB (🟡 +79 B) |
146.2 KB |
/blog/2019/08/08/react-v16.9.0 |
64.55 KB (🟡 +79 B) |
149.13 KB |
/blog/2019/08/15/new-react-devtools |
59.16 KB (🟡 +79 B) |
143.74 KB |
/blog/2019/10/22/react-release-channels |
60.98 KB (🟡 +79 B) |
145.56 KB |
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense |
65.68 KB (🟡 +79 B) |
150.26 KB |
/blog/2020/02/26/react-v16.13.0 |
61.9 KB (🟡 +79 B) |
146.48 KB |
/blog/2020/08/10/react-v17-rc |
68.18 KB (🟡 +79 B) |
152.76 KB |
/blog/all |
56.46 KB (🟡 +79 B) |
141.04 KB |
/community |
47.68 KB (🟡 +79 B) |
132.26 KB |
/community/acknowledgements |
48.87 KB (🟡 +79 B) |
133.45 KB |
/community/meet-the-team |
49.56 KB (🟡 +79 B) |
134.14 KB |
/learn |
52.64 KB (🟡 +79 B) |
137.22 KB |
/learn/add-react-to-a-website |
52.76 KB (🟡 +79 B) |
137.33 KB |
/learn/adding-interactivity |
54.33 KB (🟡 +79 B) |
138.9 KB |
/learn/choosing-the-state-structure |
60.04 KB (🟡 +79 B) |
144.62 KB |
/learn/conditional-rendering |
52.28 KB (🟡 +79 B) |
136.86 KB |
/learn/describing-the-ui |
51.49 KB (🟡 +79 B) |
136.07 KB |
/learn/editor-setup |
48.96 KB (🟡 +79 B) |
133.54 KB |
/learn/escape-hatches |
47.01 KB (🟡 +79 B) |
131.59 KB |
/learn/extracting-state-logic-into-a-reducer |
57.68 KB (🟡 +79 B) |
142.26 KB |
/learn/importing-and-exporting-components |
50.68 KB (🟡 +79 B) |
135.25 KB |
/learn/installation |
48.29 KB (🟡 +79 B) |
132.86 KB |
/learn/javascript-in-jsx-with-curly-braces |
50.75 KB (🟡 +79 B) |
135.33 KB |
/learn/keeping-components-pure |
54.88 KB (🟡 +79 B) |
139.46 KB |
/learn/managing-state |
53.6 KB (🟡 +79 B) |
138.18 KB |
/learn/manipulating-the-dom-with-refs |
55.85 KB (🟡 +79 B) |
140.43 KB |
/learn/passing-data-deeply-with-context |
55.41 KB (🟡 +79 B) |
139.98 KB |
/learn/passing-props-to-a-component |
54.45 KB (🟡 +79 B) |
139.03 KB |
/learn/preserving-and-resetting-state |
58.42 KB (🟡 +79 B) |
143 KB |
/learn/queueing-a-series-of-state-updates |
52.25 KB (🟡 +79 B) |
136.83 KB |
/learn/react-developer-tools |
48.24 KB (🟡 +79 B) |
132.82 KB |
/learn/reacting-to-input-with-state |
56.86 KB (🟡 +79 B) |
141.44 KB |
/learn/referencing-values-with-refs |
53.77 KB (🟡 +79 B) |
138.35 KB |
/learn/render-and-commit |
50.75 KB (🟡 +79 B) |
135.33 KB |
/learn/rendering-lists |
54.84 KB (🟡 +79 B) |
139.42 KB |
/learn/responding-to-events |
53.77 KB (🟡 +79 B) |
138.35 KB |
/learn/scaling-up-with-reducer-and-context |
51.82 KB (🟡 +79 B) |
136.4 KB |
/learn/sharing-state-between-components |
52.9 KB (🟡 +79 B) |
137.47 KB |
/learn/start-a-new-react-project |
49.31 KB (🟡 +79 B) |
133.89 KB |
/learn/state-a-components-memory |
57.97 KB (🟡 +79 B) |
142.55 KB |
/learn/state-as-a-snapshot |
51.55 KB (🟡 +79 B) |
136.13 KB |
/learn/thinking-in-react |
53.61 KB (🟡 +79 B) |
138.19 KB |
/learn/updating-arrays-in-state |
55.85 KB (🟡 +79 B) |
140.42 KB |
/learn/updating-objects-in-state |
55.58 KB (🟡 +79 B) |
140.16 KB |
/learn/writing-markup-with-jsx |
51 KB (🟡 +79 B) |
135.57 KB |
/learn/your-first-component |
51.58 KB (🟡 +79 B) |
136.16 KB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Let's also fix the scroll-margin-top value for headers to exclude the banner height.
It would be great to also figure out something similar for https://beta.reactjs.org/ (in the beta directory).
https://user-images.githubusercontent.com/63287548/171781248-ce66f654-2037-446a-8514-5d34661d6195.mov
Screen.Recording.2022-06-03.at.09.35.33.mov
This is how it works in beta folder
It would be great to also figure out something similar for https://beta.reactjs.org/ (in the
betadirectory).
Done
https://user-images.githubusercontent.com/32865581/171781795-285d5636-b11f-4430-a8dd-cbb90490b1a4.mov
I think it would be nice if we don't do the same for desktop? It kind of shifts the entire page and doesn't go with the flow? Thoughts?
Screen.Recording.2022-06-03.at.9.12.44.AM.mov
I think it would be nice if we don't do the same for desktop? It kind of shifts the entire page and doesn't go with the flow? Thoughts?
Let me make it smoother :)
Screen.Recording.2022-06-03.at.9.12.44.AM.mov
I think it would be nice if we don't do the same for desktop? It kind of shifts the entire page and doesn't go with the flow? Thoughts?
Yeah, I think we need to leave banner on the desktop, but turn it off on mobile screens
Yep we can make it smoother like in the https://reactnative.dev/ or we can leave the banner as such in desktop site since it doesn't take much height anyways
I updated a branch, now social banner is always present in desktop version. But on small screens it will disappear on scroll down
@harish-sethuraman @gaearon PR is ready guys) waiting for feedback :)
Hey guys! Since I made all requested changes, maybe we can proceed to merge this pull request? Or I can make any other needed changes to the PR if needed. I fear that this PR will just forever stuck here :)
Can we slightly soften the hiding of banner in mobile alone? Other than that it LGTM