React Component

At the heart of every Nova component is the React component in index.js.

Purpose

The React component is the source of truth for templating. It is used by the style guide to render live interactive documentation and previews and serves as the PHP template once transpiled.

Example

Here's an example React component named Example,

// Components.
import Icon from '../icon';
import Text from '../text';
 
// Styles.
import { useComponentStyles } from '@/components/example';
 
/**
 * Example component.
 *
 * @param {Object}  root0
 * @param {?Object} root0.icon Icon component props.
 * @param {?Object} root0.text Text component props.
 */
const Example = ( {
	icon = null,
	text = null,
} ) => {
	const styles = useComponentStyles();
 
	return (
		<div
			className={ styles.example }
			data-component="example"
		>
			<div className={ styles.inner }>
				<Icon { ...icon } />
				<Text { ...text } alias="example__text" />
			</div>
		</div>
	);
};
 
export default Example;

Importing and rendering components

At the top of our file, we import Icon and Text,

// Components.
import Icon from '../icon';
import Text from '../text';

And use them like any other React component.

<Icon name="world" />
<Text text="Hello World" />

Passing data

In Nova, we always pass the entire objects to components.

✅ Correct

const Example = ( { button = null } ) => <>
	<Button { ...button } />
</>;

❌ Incorrect

const Example = ( { buttonText = null } ) => <>
	<Button text={ buttonText } />
</>;

`useStyles` hook

Every component has a useComponentStyles hook available in the Nova build, which is a localized wrapper of useStyles (ref (opens in a new tab)).

// Styles.
import { useComponentStyles } from '@/components/example';

Which returns an object as per the Next documentation for Component-Level CSS (opens in a new tab).

const Example = () => {
	const styles = useComponentStyles();
	return (
		<div className={ styles.wrapper }>
			<div className={ styles.inner }>
				Hello World
			</div>
		</div>
	);
};

Frequently asked questions

What is `alias`?

See styling for more information about alias usage and writing un-localized CSS.

Why don't we use PropTypes?

PropTypes are limited to JavaScript syntax. JSON schemas can be parsed natively by both PHP and JS.

🤔

In a future version of Nova, deprecating the schema in favor of PropTypes is technically possible with upgrades to the transpiler.

How can I use local state?

Tk. Probably see transpiler docs.

What are my component limitations?