react-component

react-component allows you to write terse single-file React components, à la Svelte & Vue.

Installation

$ npm install @reaktivo/react-component
$ yarn add @reaktivo/react-component

Usage

react-component takes a single-file component definition and converts it into a regular component definition.

// App.component.js
import Page from './Page';

export let children;
export let title = '';

<Page>
  <h1>{title}</h1>
  {children}
</Page>

The previous is converted to:

import Page from './Page';

export default function App({ title = '', children }) {
  return (
    <Page>
      <h1>{title}</h1>
      {children}
    </Page>
  )
}

Props

As you can see on the previous example, component props are defined by the export let keywords, where the right hand side of the assignment becomes the default value of the prop.

Component name

A component's displayName will by default be parsed out of a component's file name. If you need to define a different one you can:

export const displayName = 'ComponentName';

<h1>Hello</h1>

is converted to:

export const displayName = 'ComponentName';

export default function ComponentName() {
  return (
    <h1>Hello</h1>
  );
}

Configuration

Next.js

// next.config.js
const withReactComponent = require('@reaktivo/react-component/next');

module.exports = withReactComponent({
  extension: /\.react\./
});

Webpack

// ...
module: {
  rules: [
    // ...
    {
      test: /\.react\./,
      use: ['babel-loader', '@reaktivo/react-component/loader']
    }
  ]
}

License

react-component is open source software licensed as MIT.