← Back to Tutorials Chapter 12

Additional Features & Libraries

Beyond the core React API, the ecosystem offers many utility libraries that solve common problems. This chapter covers popular third-party packages and React's lower-level APIs.

react-datepicker

A lightweight calendar date picker component with excellent i18n support.

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function MyDatePicker() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      dateFormat="yyyy/MM/dd"
      minDate={new Date()}
    />
  );
}

react-helmet-async

Manage the document head (title, meta tags, links) from your React components. This is essential for SEO and social sharing.

import { Helmet } from "react-helmet-async";

function BlogPost({ title, description }) {
  return (
    <>
      <Helmet>
        <title>{title} — My Blog</title>
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
      </Helmet>
      <article>...</article>
    </>
  );
}

Inline Styles

React supports a style prop that accepts a JavaScript object with camelCased CSS properties. It is useful for dynamic styles, but avoid it for static styling — use CSS classes instead.

function DynamicBox({ color }) {
  return (
    <div style={{
      backgroundColor: color,
      padding: "16px",
      borderRadius: "8px",
      width: color ? "200px" : "100px",
    }}>
      Hello
    </div>
  );
}

PropTypes

PropTypes provides runtime type-checking for props. While TypeScript has largely replaced it, PropTypes is still useful for JavaScript-only projects.

import PropTypes from "prop-types";

function UserCard({ name, age, isActive }) {
  return (<div>{name} ({age}) — {isActive ? "Active" : "Inactive"}</div>);
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  isActive: PropTypes.bool,
};

UserCard.defaultProps = {
  age: 0,
  isActive: false,
};

react-responsive-carousel

A flexible image carousel/slider component with swipe support, autoplay, and custom rendering.

import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";

function Gallery({ images }) {
  return (
    <Carousel showThumbs={false} autoPlay infiniteLoop>
      {images.map((src, i) => (
        <div key={i}>
          <img src={src} alt={`Slide ${i + 1}`} />
        </div>
      ))}
    </Carousel>
  );
}

react-icons

A comprehensive icon library that imports popular icon sets (Font Awesome, Material Icons, Feather, etc.) as React components. Only the icons you use end up in your bundle.

import { FaReact } from "react-icons/fa";
import { MdHome } from "react-icons/md";
import { FiSun } from "react-icons/fi";

function IconsDemo() {
  return (
    <div>
      <FaReact size={32} color="#61DAFB" />
      <MdHome size={28} />
      <FiSun className="sun-icon" />
    </div>
  );
}

React Reference API

React provides low-level utilities that power many libraries and advanced patterns:

• React.createElement(type, props, ...children) — creates a React element (what JSX compiles to).
• React.cloneElement(element, props, ...children) — clones an element with merged new props.
• React.Children — utilities for manipulating props.children (map, forEach, count, only, toArray).
• React.isValidElement — checks if a value is a valid React element.

// createElement example (equivalent to JSX)
const element = React.createElement("h1", { className: "title" }, "Hello");

// cloneElement example
const cloned = React.cloneElement(child, { expanded: true });

// Children utilities
React.Children.map(children, (child) => (
  <li>{child}</li>
));