--- title: "A visual catalog of 5000+ components." publication: "React Status" issue: 293 published_at: "2022-06-15" canonical_url: "https://react.statuscode.com/issues/293" --- Plus writing React at a Japanese temple, and how to write 'bulletproof' React apps. | #​293 — June 15, 2022 [Read on the Web](https://react.statuscode.com/issues/293) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ee8gqvihh09v6himejic.jpg)](https://www.youtube.com/watch?v=w-M9UFHLAl0) ▶[Zen and the Art of Building a Gmail-like UI with React Native](https://www.youtube.com/watch?v=w-M9UFHLAl0) — We see a lot of screencasts and it’s safe to say we’ve _never_ seen one like this: it features super-high production values, no spoken words and is shot on location at [Koshoji Temple](https://www.uji-koushouji.jp/eng/index.html) in Japan. It’s a treat to watch. Takuya Matsuyama [Bulletproof React: A Scalable Architecture for Building Production-Ready React Apps](https://github.com/alan2207/bulletproof-react) — We casually mentioned this a year ago but it’s had updates and deserves another look. This _isn’t_ a boilerplate app or framework but an opinionated guide showing how you could structure a large scale React app if you are lacking for inspiration. Alan Alickovic [![\](https://copm.s3.amazonaws.com/ba75e329.png)](https://sendbird.com/signup?&utm_source=cooperpress_ad&utm_medium=newsletter&utm_campaign=react_newsletter&utm_content=ad_3) [Build Better Chat Faster With The Sendbird React UIKit](https://sendbird.com/signup?&utm_source=cooperpress_ad&utm_medium=newsletter&utm_campaign=react_newsletter&utm_content=ad_3) — The new Sendbird Chat UIKit is easy-to-use and more customizable. Enable the best chat experience in your app with a free 30-day trial. Beyond 30 days, keep innovating for free with our developer plan. Sendbird sponsor [Component Encyclopedia: A Catalog of 5000+ UI Components](https://storybook.js.org/blog/component-encyclopedia/) — [Storybook](https://storybook.js.org), a popular UI component devtool, has unveiled [a visual catalog](https://storybook.js.org/showcase) of over 5,000 components (not _all_ React, but largely) from all corners of the Web – you don’t need to be a Storybook user to take advantage of this as links to repos and demos are provided in each case. Dominic Nguyen (Storybook) **Quick bits:** - 📅 [React Brussels](https://www.react.brussels/) is taking place this October both in Belgium and online. - 📝 [Component Party](https://component-party.dev/) is a sort of Rosetta Stone for comparing simple code examples between React, Svelte, Vue, Angular, and similar frameworks. - 🤑 The company behind [Refine](https://refine.dev/), a React-based framework for building internal tools quickly, has [raised $1m in seed funding](https://refine.dev/blog/weve-raised-dollar1m-seed-funding/) to continue work on the project. ['How I Created a Desktop Productivity App with React and Rust'](https://betterprogramming.pub/how-i-created-the-focus-app-using-react-and-rust-fd8fd072d1a7) — This is a neat idea. Amine wanted to have an extremely light weight way to take quick notes while in the middle of other tasks and brought together React with the Rust-based [Tauri](https://github.com/mdtanrikulu/react-tauri) to make it happen. Amine Ben Hammou Jobs [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 [Element vs Component vs Instance](https://www.robinwieruch.de/react-element-component/) — Code heavy demonstrations of the distinction between the meaning of an element, component or instance in React, before looking at how they tie together. Robin Wieruch ['How We Reduced Bugs in Our React Codebase'](https://betterprogramming.pub/how-we-reduced-bugs-in-our-react-code-base-9a7a979b4442) — A thorough examination of three unexpected code behaviours in React which are then addressed by identifying and understanding their underlying patterns and anti-patterns. Darshita Chaturvedi and Shyam Swaroop 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ux5b2ykhldgw7anykvoz.jpg)](https://github.com/vinothpandian/react-sketch-canvas) [react-sketch-canvas: Freehand Vector Drawing Component](https://github.com/vinothpandian/react-sketch-canvas) — A feature-complete drawing component which uses SVG for the canvas. To help decide whether it’s a fit for your project, take it for a [test drive](https://vinoth.info/react-sketch-canvas/). Vinoth Pandian [React Switch 7.0: A Draggable Toggle Switch Component](https://github.com/markusenglund/react-switch) — Supports custom styling, is touch friendly, plus accessibility-friendly features. [Demos here.](https://markusenglund.github.io/react-switch/) Markus Englund [Be Amongst the First to Shape Our New Dev Community. Join Us Today](https://community.bitmovin.com/?utm_source=cooper-react-status-brief-link&utm_medium=%20paid-newsletter&utm_campaign=dev-community) Bitmovin Inc. sponsor [react-cmdk: A Command Palette Component for React](https://react-cmdk.com/) — Customizable for building advanced functionality and you can give it a test run right on the page by hitting CMD/CTRL-K. [GitHub repo.](https://github.com/albingroen/react-cmdk) Similar to [kbar](https://github.com/timc1/kbar) we featured recently. Albin Groen [Fourier Series Animation: Using the Fourier Series to Approximate Line Drawings](https://jasonfyw.com/fourier-series/) — A neat little demo and of course [there’s source.](https://github.com/jasonfyw/fourier-series) Jason Wang ## ⚡️ Quick Bits: [react-timeago](https://github.com/nmn/react-timeago) — Takes any date and expresses it in relation to the current date, such as “6 days ago”, with support for a large number of spoken languages. [react-easy-crop](https://valentinh.github.io/react-easy-crop/) — Crop images with easy, intuitive interactions. [rc-image](https://github.com/react-component/image) — Image component abstracted from its [Ant Design](https://ant.design) context. 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