@financial-times/spark-o-autocomplete/index.js

Spark React component for o-autocomplete

import React, { useEffect, useRef } from 'react';
import oAutocomplete from '@financial-times/o-autocomplete';
import PropTypes from 'prop-types';

/**
 * Origami is an "external" (not owned or maintained by
 * the Spark team) CSS library which is designed to
 * be used in the global scope. So let's import it inside
 * a stylesheet named *.global.css, which is ignored by
 * the CSS Modules plugin in WebPack config.
 * (https://github.com/Financial-Times/spark/blob/main/src/webpack/client.js#L88)
 *
 * Excluding it from CSS Modules in WebPack config should
 * mean each new workspace won't import its own copy of
 * Origami, which could bloat the size of the bundle.
 */
import './base.global.scss';

function Autocomplete(props) {
	const ref = useRef();

	useEffect(() => {
		new oAutocomplete(ref.current, {
			source: props.source,
			mapOptionToSuggestedValue: props.mapOptionToSuggestedValue,
			onConfirm: props.onConfirm,
			defaultValue: props.defaultValue,
		});
	});

	return (
		<span
			data-o-component="o-autocomplete"
			className="o-autocomplete"
			ref={ref}
		>
			<input id={props.id} type="text" className="o-autocomplete__input" />
		</span>
	);
}

Autocomplete.propTypes = {
	id: PropTypes.string.isRequired,
	source: PropTypes.func.isRequired,
	mapOptionToSuggestedValue: PropTypes.func,
	onConfirm: PropTypes.func,
	defaultValue: PropTypes.string,
};

export default Autocomplete;