--- title: "Beautiful maps for React apps" publication: "React Status" issue: 299 published_at: "2022-07-27" canonical_url: "https://react.statuscode.com/issues/299" --- Plus examples of larger, open source React apps, yet another state management library, and a way to soothe those HTML email generation headaches. | #​299 — July 27, 2022 [Read on the Web](https://react.statuscode.com/issues/299) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/uc0jwt9pbqdl2y3rnbax.jpg)](https://maxrozen.com/examples-of-large-production-grade-open-source-react-apps) [Examples of Larger Production-Grade, Open Source React Apps](https://maxrozen.com/examples-of-large-production-grade-open-source-react-apps) — _“All of the to-do apps are great for starting to learn React, but what about real-life? Let’s see what real production React apps are like.”_ I see people asking for examples like this every week on social media, so this post is _very_ useful - thanks Max! Max Rozen [Mantine 5.0: Full Featured React Component Library](https://mantine.dev/) — The developers of this popular MIT-licensed, TypeScript-based collection of 100+ components and hooks are back with [yet another major release](https://mantine.dev/changelog/5-0-0/) with full React 18 support, as well as new or improved APIs for their tabs, accordion, and popover components. The Mantine team's velocity is impressive and it’s an elegant set of components too. Mantine Team [![\](https://copm.s3.amazonaws.com/addd80b8.png)](https://www.grapecity.com/developer-use-cases/react-spreadsheet-tools?utm_source=CooperPress&utm_medium=React-Status&utm_campaign=SPJS-React-Status-Primary-Sponsor-7-22) [SpreadJS: A Powerful React Spreadsheet Library for Web Apps](https://www.grapecity.com/developer-use-cases/react-spreadsheet-tools?utm_source=CooperPress&utm_medium=React-Status&utm_campaign=SPJS-React-Status-Primary-Sponsor-7-22) — SpreadJS: the industry-leading JavaScript spreadsheet for adding advanced spreadsheet features to your enterprise apps. Build finance, analysis, budget, and other apps. Excel I/O, 500+ calc functions, tables, charts, and more. View React demos today. SpreadJS from GrapeCity sponsor [A Sneak Peek at Storybook 7.0](https://storybook.js.org/blog/storybook-7-0-design-sneak-peek/) — The new major release of [Storybook](https://storybook.js.org) (a popular UI component dev tool) is just around the corner and here’s an early look at what to expect: visual updates, UX tweaks, and faster performance. Dominic Nguyen [How to Use Leaflet to Display Google Maps-like Maps](https://spin.atomicobject.com/2022/07/27/leaflet-react-app/) — When someone says something is “quicker and easier to set up than you think”, I raise a cynical eyebrow, but this is very straightforward as long as you’re happy to lean on OpenStreetMap. Casey Falkowski **Quick bits:** - _The New Stack_ [has profiled a company](https://thenewstack.io/language-i-o-runs-react-based-javascript-with-java-backend/) that's built a ML-powered multilingual customer support system that can cope with 'industry specific jargon' and is built on React atop _Java._ - A React developer with eight years experience (almost as long as React has existed) shares [how he writes React after eight years.](https://t.co/1lzsLj47F7) Is it contrarian and highly opinionated? Absolutely. - A developer makes the argument that [Remix isn't really a _React_ framework](https://andre-landgraf.dev/blog/2022-07-16_why_remix_is_not_a_react_framework_but_a_full_stack_web_framework/) but more a full-stack Web framework generally. Jobs [Senior Software Engineer at This Dot Labs (Remote, Worldwide)](https://www.thisdot.co/job/senior-software-engineer-javascript-remote) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more. This Dot Labs [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) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired [How to Create a Tic-Tac-Toe Board with React](https://blog.avenuecode.com/how-to-create-a-tic-tac-toe-board-using-react.js) — What better way to get some experience with React: this article takes you through the entire lifecycle of activities for the classic zero-sum game of perfect information. Diego Zanivan ▶[Six State Mistakes Every Junior React Developer Makes](https://www.youtube.com/watch?v=Fhu5cu864ag) — _(16 minutes.)_ Lama Dev [How to Make a Range Component with rc-slider](https://t.co/CCq181ADgK) Matthew Croak 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/blpc6z6uyw0gjqegcxek.jpg)](https://www.react-simple-maps.io/) [React Simple Maps 3.0: Beautiful SVG Maps for React Apps](https://www.react-simple-maps.io/) — Powered by [d3-geo](https://github.com/d3/d3-geo) and [topojson](https://github.com/topojson/topojson) and provides a declarative API for defining maps to render. Lots of examples here. Z Creative Labs [Mailing 0.5: Build, Test, Send Emails with React](https://github.com/successor-software/mailing) — If working with HTML emails feels like taking a trip back to 1999 (tables, no JavaScript, and all the rest) this toolkit that brings some modern niceties to the process is for you. Peter Sugihara [Unlock Completely Free Access to Stream's Chat & Activity Feed APIs](https://getstream.io/maker-account/?utm_source=React_Status&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=ReactStatus_July2022_MakerAccount_klmh22) Stream sponsor [Another State Management Solution for React? Providence!](https://opencraft.com/blog/better-state-management-for-react-using-providence/) — Newsflash: Another state management library has rolled into town :-) And this one is _“better”_.. Curiously, it’s built on _top_ of Redux, too, keeping many of Redux’s advantages while claiming to reduce the amount of “fighting” you need to do to make things work. You be the judge. OpenCraft [react-float-menu: A Draggable, Smart Menu](https://github.com/prabhuignoto/react-float-menu) — And, unsurprisingly, the menu floats. There’s also [a Vue version.](https://github.com/prabhuignoto/vue-float-menu) Prabhu Murthy [next-international: Type-Safe i18n for Next.js](https://github.com/QuiiBz/next-international) — Promises 100% type safety and is only 1.2KB gzipped. A fair bit of cleverness going on here if TypeScript is your bag. Tom Lienard [react-intersection-observer: React Component to Monitor When an Element Enters or Leaves the Viewport](https://github.com/thebuilder/react-intersection-observer) Daniel Schmidt **⚡️ THE RAPID RELEASES ROUND** [React Native Testing Library 11.0](https://github.com/callstack/react-native-testing-library) [Emoji Mart 5.2](https://github.com/missive/emoji-mart) – Emoji picking component. [TanStack Table 8.5](https://github.com/TanStack/table) – Headless UI for building tables and datagrids. [flowchart.fun 1.9](https://github.com/tone-row/flowchart-fun) – Generate flowcharts and diagrams from text. [React Spring 9.5.2](https://github.com/pmndrs/react-spring) – Spring physics based animation library. [Remotion 3.1.7](https://github.com/remotion-dev/remotion) – Create videos programmatically in React. [React-Windows-UI 4.1](https://github.com/virtualvivek/react-windows-ui) – Build Windows fluent UI apps with React. 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