Devon Govett devongovett

Tabs API Migration Guide

The API for the React Spectrum Tabs component changed significantly between Beta and RC. The documentation on the React Spectrum website has been updated to follow the new API. This guide aims to assist developers using the beta and wishing to upgrade to the new RC version.

In the previous API, the Tabs component accepted <Item> elements as children. Each item had a title prop representing the tab header, and children representing the tab contents.

<Tabs aria-label="History of Ancient Rome">
  <Item title="Founding of Rome" key="FoR">
    <Content marginTop="size-250" marginStart="size-125">
      <Text>Arma virumque cano, Troiae qui primus ab oris.</Text>

	import {ChevronLeft, ChevronRight} from 'lucide-react';
	import {useEffect, useState} from 'react';

	export function Pagination({carousel}: {carousel: HTMLElement}) {
	// Scroll by 1 page in the given direction (-1 or +1).
	// This uses the width of the carousel minus the padding and gap between items.
	// Use behavior: 'smooth' and the browser will animate the scrolling.
	let scroll = (dir: number) => {
	let style = window.getComputedStyle(carousel);
	carousel.scrollBy({

	// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary!
	// Example using the Next.js App Router.
	import { useRouter } from 'next/navigation';
	import { useEffect } from 'react';

	function useLinkHandler() {
	let router = useRouter();

	useEffect(() => {
	let onClick = e => {

	const pageQuery = createQuery(); // create a top-level query
	const App = () => (
	// rendering MovieList automatically composes `MovieList.fragment` into the query.
	<Connect
	query={query(pageQuery)}
	children={({ loaded, data }) => {
	let result = pageQuery(data);
	return <MovieList data={result.movieList} />;
	}} />
	);

	// Welcome! require() some modules from npm (like you were using browserify)
	// and then hit Run Code to run your code on the right side.
	// Modules get downloaded from browserify-cdn and bundled in your browser.
	var AV = require('av');
	//require('mp3');

	player = AV.Player.fromURL('http://static.marco.org/Jskjlf0YhqA.mp3').play();

	DBC = new r.Struct
	# ...
	stringBlockOffset: -> 4 * 5 + @recordCount * @recordSize
	ptr: new r.Pointer(uint32le, new r.String(null), relativeTo: 'stringBlockOffset')

	var $ = require('jquery');

	var transitionEvents = 'transitionend msTransitionEnd webkitTransitionEnd';
	var visibilityEvents = 'visibilitychange mozvisibilitychange msvisibilitychange webkitvisibilitychange';

	/**
	* Runs the given callback when the next transition on the selected element finishes.
	* Sometimes the transitionend event doesn't fire when the page is in a
	* background tab, so we also handle the page visibility events here too.
	*/

	# put this in your .bash_profile
	pull_request() {
	to_branch=$1
	if [ -z $to_branch ]; then
	to_branch="master"
	fi

	# try the upstream branch if possible, otherwise origin will do
	upstream=$(git config --get remote.upstream.url)
	origin=$(git config --get remote.origin.url)

	doc.addPage();

	// add content

	// this sets the height in the actual PDF output
	// MediaBox[1] is really the Y, but PDFs use a flipped coordinate system
	// where y=0 is at the bottom.
	// make sure you do this before adding another page
	doc.page.dictionary.data.MediaBox[1] = doc.page.height - doc.y;

	#!/usr/bin/env phantomjs

	var system = require('system');
	var text = encodeURIComponent(system.stdin.read());
	var url = "http://translate.google.com/#auto/en/" + text;

	var page = require('webpage').create();
	page.settings.userAgent = 'Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0';

	page.onConsoleMessage = function (msg) {