---
title: "Generating dynamic video animations with React"
publication: "React Status"
issue: 304
published_at: "2022-09-07"
canonical_url: "https://react.statuscode.com/issues/304"
---

Plus React Native 0.70, Next.js Conf 2022, and why use Storybook anyway? |        

#​304 — September 7, 2022 

[Read on the Web](https://react.statuscode.com/issues/304)   React Status  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/bz4zzk1a2ybx3ncxqhhl.jpg)](https://www.youtube.com/watch?v=sA-X0Bw_7Gg)  

▶[Creating F1 Style Graphics with Remotion](https://www.youtube.com/watch?v=sA-X0Bw_7Gg) — Fans of Formula 1 motorracing may recall the 'stinger' transition from the 2021 season. The author of [Remotion](https://www.remotion.dev) – a library that can generate video from React code – walks through its recreation in what can only be described as record lap time. _(And is, perhaps, the only coding video to begin at a racing circuit?)_ 

Jonny Berger   

📆 [Next.js Conf 2022 Announced](https://vercel.com/blog/nextjs-conf-2022) — Takes place on the _sixth_(!) anniversary of the creation of Next.js (the hugely popular React framework) and it’s online (and at no cost) so everyone can get involved. You could even be a presenter – the [call for proposals](https://nextjs-conf.super.site/) is open till September 16. The event starts at 10:30am Pacific on October 25, 2022 and you can [register here](https://nextjs.org/conf). 

Vercel   [![\](https://copm.s3.amazonaws.com/0f1841d6.jpeg)](https://www.grapecity.com/developer-use-cases/react-datagrid-components?utm_source=CooperPress&utm_medium=React-Status&utm_campaign=FlexGrid-React-Status-Primary-Sponsor-9-22) 

[FlexGrid by Wijmo: The Industry-Leading React Datagrid](https://www.grapecity.com/developer-use-cases/react-datagrid-components?utm_source=CooperPress&utm_medium=React-Status&utm_campaign=FlexGrid-React-Status-Primary-Sponsor-9-22) — We are excited to announce some great new features in our powerful React datagrid component for your web applications. Bind, edit, sort, filter, group, and do much more to make the most of your tabular data. Get started with FlexGrid for free today. 

Wijmo from GrapeCity sponsor   

[Why Use Storybook in 2022?](https://storybook.js.org/blog/why-storybook-in-2022/) — I’d _prefer_ an independent take, warts and all, but this is a reasonable roundup of why [Storybook](https://storybook.js.org) is popular among users of component-driven frameworks. Write declarative stories, simulate your components in action, and share the results or use it as an internal directory. 

Dominic Nguyen (Storybook)   

🗣 If you _do_ write any opinion posts about Storybook (or any other React topic, for that matter), let us know by replying to any issue of _React Status_ and we'll consider them for inclusion in future issues.  

[React Native 0.70 Released](https://reactnative.dev/blog/2022/09/05/version-070) — The new release features [Hermes](https://hermesengine.dev) as the default engine, full CMake support for Android, unified configuration for Codegen, and a refresh of the documentation for the [‘New Architecture’](https://reactnative.dev/docs/next/the-new-architecture/landing-page). 

React Native Core Team    

Jobs  

[Full-Stack Engineer (NYC / Remote)](https://apply.workable.com/j/E0E1B15339) — 100M+ devices, 100B+ API calls. Radar is looking for Product Engineers to build geospatial dev tools. 
Radar   

[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 BenchSci Moved Its Science Webapp to Next.js](https://blog.benchsci.com/moving-house-to-next.js) — BenchSci’s [AI-Assisted Reagent Selection](https://www.benchsci.com/platform/ai-assisted-reagent-selection) app is at the core of the company’s business. Here’s the story of how they moved it from a collection of legacy technologies to Next.js _without_ sacrificing the user experience. 

Tim Beamish  

🛠 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ynmir68xrzj2hmmkmvww.jpg)](https://github.com/plotly/react-cytoscapejs)  

[react-cytoscapejs 2.0: Component for Network Visualizations](https://github.com/plotly/react-cytoscapejs) — Wraps the popular [Cytoscape.js](https://js.cytoscape.org) graph network rendering library and makes its visualizations ([such as these](https://js.cytoscape.org/#demos)) more easily deployable within your React app. 

Plotly   

[Hyper Fetch: A Turbocharged Fetch Library](https://hyperfetch.bettertyped.com/) — The creator bills it as _“a mix of Axios and react-query in one, with advanced persistence options.”_ It’s backend agnostic and offers queues, caching, persistence, and even offline support out of the box. [GitHub repo](https://github.com/BetterTyped/hyper-fetch). 

Maciej Pyrc et al.   

[With Retool, Ship Apps Fast with 90+ Production-Ready UI Components](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) 

Retool sponsor   

[Rodal 2.0: A React Modal with Animations](http://chenjiahan.github.io/rodal/) — Things like spinning into view, sliding in, fading, zooming, flipping, etc. I’m not a fan of modals but this is nicely understated and quick. React 17+ only. Stick with v1 if you’re using React 16. [GitHub repo](https://github.com/chenjiahan/rodal). 

neverland   

[React Recoil Form: Efficient State for Large Forms](https://github.com/witbybit/react-recoil-form) — While still in pre-release, this library employs [Recoil](https://recoiljs.org) to handle large forms such that typing in one field doesn’t lead to unnecessary re-renders of the entire form. 

Wit By Bit    

**⚡️ THE RAPID RELEASES ROUND** 

- [Docusaurus 2.1](https://github.com/facebook/docusaurus)
 ↳ Documentation site framework.
- [React Calendar 3.8](https://github.com/wojtekmaj/react-calendar)
 ↳ Long standing date selection component.
- [Styleguidist 12.0](https://github.com/styleguidist/react-styleguidist)
 ↳ Component dev environment with living style guide.
- [React Virtuoso 2.18](https://github.com/petyosi/react-virtuoso)
 ↳ Powerful virtual list component.
- [Little State Machine 4.6](https://github.com/beekai-oss/little-state-machine)
 ↳ Hook for state management.
- [MUI Core 5.10.4](https://github.com/mui/material-ui)
 ↳ Material Design React components.         

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
