ember-function-component

Use functions and hooks as components instead of classes. ...but without dependency lists ;)

DANGER: this library is experimental and not thoroughly tested.

NOTE: mass use of function components will result in performance degradation when compared with Glimmer components

Installation

ember install ember-function-component
# or
npm install ember-function-component
# or
yarn add ember-function-component

Usage

Example with Ember Octane

/** app/components/toggle.js * Secret: function components are actually hooks */exportdefaultfunctionuseToggle(){const[value,setValue]=useState(false);consttoggle=useCallback(()=>setValue(!value));return{ value, toggle };}

{{!-- app/components/toggle.hbs --}}{{this.value}}
<buttontype='button'{{on'click'this.toggle}}>
Toggle
</button>

this will be a reference to any value returned from the function

Single-File Components

The same SFC technique used with Glimmer components can be used with function components:

import{setComponentTemplate}from'@ember/component';import{hbs}from'ember-cli-htmlbars';import{useState}from'ember-function-component';exportdefaultsetComponentTemplate(hbs` {{this.value}} <button type='button' {{on 'click' this.toggle}}> Toggle </button> `,functionuseToggle(){const[value,setValue]=useState(false);return{ value,toggle: ()=>setValue(!value)};});

Depending on the direction of ember-template-imports this syntax may be possible in the future:

import{setComponentTemplate}from'@ember/component';import{hbs}from'ember-cli-htmlbars';import{useState}from'ember-function-component';exportdefaultfunctionToggleComponent(){const[value,setValue]=useState(false);consttoggle=()=>setValue(!value);return<template>{{value}}<buttontype='button'{{on'click' toggle}}>
Toggle
</button></template>;}

Accessing Services

import{useService}from'ember-function-component';exportdefaultfunctionMyComponent(){letmyService=useService('some-service');return{property: myService.something};}

API

import * from 'ember-function-component':

• useState
• useCallback
• useEffect
• useService

Compatibility

• Ember.js v3.25 or above
• Node.js v12 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.