Last month we announced Ionic React, and have been blown away by the reception from both the Ionic community as well as the React community. Today, we are excited to launch a companion project to Ionic React that makes tying into device hardware and APIs a breeze in an Ionic React project.
So today, we are launching Ionic React Hooks, a collection of React hooks that act as wrappers around the Capacitor APIs, as well as some other Ionic platform-specific features. With Ionic React Hooks, you can start accessing device hardware in just a few lines of code, all while coding in a familiar React paradigm.
What’s the Hook for Hooks?
Hooks were introduced in React v16.8 and allow a way to access certain React features in a simple and clean manner while using functional components.
Before hooks, you pretty much needed to use class-based components to have local state, make web API calls, use React’s context, or tie into a component’s lifecycle events. While class-based components are great, developers often prefer to use the functional approach, which consists of a simple function that takes in a props object and returns a React element. Functional components are often smaller and easier to understand than their class-based counterparts.
Hooks make it possible to do more complex tasks in a functional component.
For more information about React Hooks and a primer on how they work, head over to React’s guide to hooks here.
At Ionic, we are fans of functional components and hooks, so it was natural to want a way to consume the APIs we build using a hooks based approach. And that’s where Ionic React Hooks comes in! Let’s see how to get started.