--- title: "Next.js 10.2" publication: "React Status" issue: 237 published_at: "2021-05-05" canonical_url: "https://react.statuscode.com/issues/237" --- Plus a new React component collection, hooks for Framer Motion, and a hooks cheat sheet. | #​237 — May 5, 2021 [Read on the Web](https://react.statuscode.com/issues/237) React Status ⚛️ _Your weekly React news digest, every Wednesday_ [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/s17t9nqasjxyex8rzl3i.jpg)](https://mantine.dev/) [Mantine: A New React Component Library](https://mantine.dev/) — An MIT licensed, TypeScript-based collection of around 60 components and hooks with native dark theme support and a focus on usability and accessibility. Plenty of documentation and examples - we like it. Oh, and they work with Preact too. Mantine Team ▶[A Comparison of Five React Frameworks](https://youtu.be/dfMhRYOtglg) — In just 26-minutes, this video provides most of the information required to pick the right React framework from five top players in the space: CRA, Gatsby, Next.js, Blitz, and Redwood. Leigh Halliday [![\](https://copm.s3.amazonaws.com/7e9b2d9e.jpg)](https://learn.launchdarkly.com/demo/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q1-cooperpress) [Book a Demo. Ship Fast. Rest Easy. LaunchDarkly](https://learn.launchdarkly.com/demo/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q1-cooperpress) — Testing in production? It's scary until it's not. Get total control of your code to ship fast, reduce risk, and reclaim your nights and weekends. LaunchDarkly sponsor [Next.js 10.2](https://nextjs.org/blog/next-10-2) — The [Next.js](https://nextjs.org) team at Vercel has just released 10.2 and the advertised improvements exceed expectations for a minor release: (up to 60%) faster builds, faster refreshes and faster startup, along with improved accessibility and more flexible redirects and rewrites. Not to play favorites, Gatsby also got a release in the shape of [Gatsby 3.4](https://www.gatsbyjs.com/docs/reference/release-notes/v3.4/). Vercel [Ten Apps That Use React Native](https://t.co/Jkko0Sc0VO?amp=1) — Given their corporate tie-in, it should come as no surprise that the Facebook and Instagram mobile apps use React Native. The other eight names on the list, however, may come as more of a surprise. David Jöch Jobs [React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=react) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find React Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-reactstatus%29&utm_content=find-your-next-job) — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. Hired 🧑‍💻 Got a job listing to share? _[Here's how](https://booking.cooperpress.com/jobs)_. 📘 Tutorials and Stories [TypeScript Function Syntaxes](https://kentcdodds.com/blog/typescript-function-syntaxes) — Flexibility can be a two-edged sword: new developers, in particular, may be overwhelmed by the options available to them. Kent provides some prescriptive syntax ideas to get you started. Kent C. Dodds ▶[A Vite 2.0 Crash Course](https://www.youtube.com/watch?v=LQQ3CR2JTX8) — **“_I’m never going to use Create React App again_”** states the author of this video. A bold claim backed by his love for [Vite](https://github.com/vitejs/vite), a fast frontend build tool. Jesse Hall [Creating a Web App with Yarn Workspace, TypeScript, `esbuild`, React, and Express](https://halftheopposite.dev/post/app-yarn-typescript-esbuild-part-1) — The first of a three part series followed by a bonus article featuring advanced techniques. The latter includes publishing to [Docker](https://www.docker.com) using [GitHub Actions](https://github.com/features/actions). Aymeric Chauvin [How to Implement a React Data Grid (One That’ll Make Your Life Easier)](https://www.telerik.com/videos/kendo-ui/how-to-implement-a-react-data-grid-getting-started-with-the-kendoreact-grid?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-video-implement-react-grid&utm_content=sponsored-link) — The KendoReact Data Grid is not only feature rich and very fast, but also satisfying to work with. [Watch video tutorial](https://www.telerik.com/videos/kendo-ui/how-to-implement-a-react-data-grid-getting-started-with-the-kendoreact-grid?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-video-implement-react-grid&utm_content=sponsored-link%20). Progress KendoReact sponsor [Adding Image Upload to a React Native App with AWS Amplify](https://dev.to/aws/adding-image-upload-to-a-react-native-app-with-aws-amplify-4j7m) — With [Amplify](https://aws.amazon.com/amplify/), AWS is looking to make inroads into mobile app development. The tutorial author illustrates its use with this common application requirement. Derek Bingham [Create a Whack a Mole Game With React and JavaScript](https://t.co/ua5FS8JCmf?amp=1) — For those new to React, an (incredibly) simple tutorial with a relatable case study is a great way to kickstart your educational journey. John Au-Yeung beginner [React 17 Adds Support for KeyboardEvent.code Property to SyntheticEvent](https://blog.saeloun.com/2021/04/23/react-keyboard-event-code) — The new major release of React includes this small but important change. Aditi Tipnis 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/f4mkldbudgbhflt0b82d.jpg)](https://github.com/okonet/react-scroll-sync) [react-scroll-sync: Synced Scroll Position Across Multiple Scrollable Elements](https://github.com/okonet/react-scroll-sync) — There is, of course, a [page with a demo on it.](https://react-sync-scroll.netlify.app/) :-) Andrey Okonetchnikov [React Hooks Cheat Sheet](https://gumroad.com/l/react-hooks-cheatsheet) — An excellent resource for your office wall with an innovative approach to pricing: you pay what you think it’s worth (or even zero - the creator suggests). Sébastien Castiel [ClickableBox: Automatically Add `onClick` to HTML Elements](https://github.com/danoc/clickable-box) — This component also returns the attributes and listeners needed to make these elements accessible as if they were buttons. Daniel O’Connor [Free Chat & Activity Feed APIs for Qualifying Teams](https://getstream.io/blog/maker-account/?utm_medium=promoted_newsletter&utm_source=react_status) Stream sponsor [State Designer: Optimizing the State Management Design Experience](https://www.state-designer.com/) — Yes, yes, another state management library, but the idea here is to help you figure out the design of your states. [Example](https://codesandbox.io/s/state-designer-react-r0z0v) and [GitHub repo.](https://github.com/steveruizok/state-designer) Steve Ruiz [Framer Motion Hooks](https://github.com/matthiaaas/framer-motion-hooks) — The one gap in [Framer Motion](https://www.framer.com/motion/)? No hooks. Now there's an option to _"fill the hook gap"_, as they put it. Matthias Halfmann [Chat UI Kit React: Roll Your Own](https://github.com/chatscope/chat-ui-kit-react) — Build a chat UI with React components and avoid much of the hassle and complication of piecing together your own. chatscope **⚡️ Quick Bits:** Interesting projects which you may have missed: - [react-native-wheel-scrollview-picker](https://github.com/rheng001/react-native-wheel-scrollview-picker) — Dial up some numeric input for your mobile app. - [react-google-autocomplete](https://github.com/ErrorPro/react-google-autocomplete) — Use Google Maps place predictions to pre-populate a location field. - [React Bulma Components](https://github.com/couds/react-bulma-components) — This CSS framework is now available for React. - [Grid.js for React](https://github.com/grid-js/gridjs-react) — Advanced JavaScript tables. - [Box UI Elements](https://github.com/box/box-ui-elements) — For developers working in the [Box](http://box.com) ecosystem. This issue was curated by Terence C. Gannon and edited by the Cooperpress team. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom