# @web-companions/fc

> Functional Components. A wrapper for creating Web components like React.js components with hooks

Latest version **0.1.12** (published 2024-05-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @web-companions/fc
pnpm add @web-companions/fc
yarn add @web-companions/fc
bun add @web-companions/fc
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.12 |
| Published | 2024-05-24 |
| First published | 2020-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 57.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | sumbad |
| Maintainers | sumbad |
| Keywords | Web Components, hooks |

## Links

- npm: https://www.npmjs.com/package/@web-companions/fc
- Repository: https://github.com/sumbad/web-companions
- Homepage: https://github.com/sumbad/web-companions#readme
- Issues: https://github.com/sumbad/web-companions/issues
- npm.io page: https://npm.io/package/@web-companions/fc

## Recent versions

- 0.1.12 (latest) — 2024-05-24
- 0.1.9-develop.0 (next) — 2023-04-24
- 0.1.11 — 2024-05-23
- 0.1.10 — 2023-06-16
- 0.1.10-alpha.0 — 2023-06-16
- 0.1.9 — 2023-06-13
- 0.1.9-develop.1 — 2023-05-03
- 0.1.8 — 2022-06-29
- 0.1.7 — 2022-02-24
- 0.1.6 — 2021-10-13
- 0.1.5 — 2021-10-12
- 0.1.5-develop.1 — 2021-10-08
- 0.1.5-develop.0 — 2021-05-31
- 0.1.4 — 2021-03-09
- 0.1.3 — 2021-02-16
- … 23 more at https://npm.io/package/@web-companions/fc/versions

## README

<div align="center">
  <a href="https://www.npmjs.com/package/@web-companions/fc">
    <img src="https://img.shields.io/npm/v/@web-companions/fc.svg?maxAge=86400" alt="Last npm Registry Version">
  </a>
  <a href="https://bundlephobia.com/result?p=@web-companions/fc">
    <img alt="gzip size" src="https://badgen.net/bundlephobia/minzip/@web-companions/fc" />
  </a>
</div>

<h1 align="center">@web-companions/fc</h1>

> Functional Components. A wrapper for creating Web components like React.js components with hooks

This library is just an experiment inspired by React.js and [TNG-Hooks](https://github.com/getify/TNG-Hooks). If you are looking for a simple and universal library for creating UI elements please see on [@web-companions/gfc](https://github.com/sumbad/web-companions/tree/master/packages/gfc) and its preset [@web-companions/lit](https://github.com/sumbad/web-companions/tree/master/packages/lit)

- [Installation](#installation)
- [Usage](#usage)

---

## Installation

```
npm install @web-companions/fc --save
```

---

## Usage

It's up to you, but I suggest using this library with [babel-plugin-transform-jsx-to-tt](https://github.com/sumbad/babel-plugin-transform-jsx-to-tt) and lit-html or another library to rendering templates to DOM.

**index.jsx**

```tsx
/**
 * ROOT element
 */
import { EG, NG, useEffect, useState } from '@web-companions/fc';
import { render } from 'lit-html';

EG({ render })(() => {
  const [state, setState] = useState<number>(1);

  useEffect(() => {
    setTimeout(() => {
      setState(10);
    }, 3000);
  }, []);

  return <div>{state}</div>;
})('demo-fc');
```

More examples are [here](https://github.com/sumbad/web-companions/tree/master/packages/fc/demo/src).

---

---
_Source: https://npm.io/package/@web-companions/fc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._