# classless-component

> A utility method to create react, preact, inferno components without using class keyword

Latest version **1.0.2** (published 2018-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install classless-component
pnpm add classless-component
yarn add classless-component
bun add classless-component
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-07-18 |
| First published | 2017-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 49.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | staydecent |
| Maintainers | staydecent |
| Keywords | preact, vdom, react, babel |

## Links

- npm: https://www.npmjs.com/package/classless-component
- Repository: https://github.com/staydecent/classless-component
- Homepage: https://github.com/staydecent/classless-component#readme
- Issues: https://github.com/staydecent/classless-component/issues
- npm.io page: https://npm.io/package/classless-component

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2018-07-18
- 1.0.1 — 2018-05-27
- 1.0.0 — 2017-12-03
- 0.1.0 — 2017-07-11

## README

# Classless Component
[![travis](https://travis-ci.org/staydecent/classless-component.svg?branch=master)](https://travis-ci.org/staydecent/classless-component)
[![devDependency Status](https://david-dm.org/staydecent/classless-component/dev-status.svg?style=flat)](https://david-dm.org/staydecent/classless-component#info=devDependencies)

If you use [React](https://github.com/facebook/react), [Preact](https://github.com/developit/preact), or [Inferno](https://github.com/infernojs/inferno), but don't want to use the `class` syntax because you've read articles by [Eric Elliott](https://medium.com/javascript-scene/a-simple-challenge-to-classical-inheritance-fans-e78c2cf5eead#.a3ako7xx9) and others that have lead you to favour object composition over class inheritance, then this utility is for you. 

### Under Rapid Development!

Annoyed that [recompose](https://github.com/acdlite/recompose) was coupled to React and [Incompose](https://github.com/zanettin/incompose/) to Inferno, and wanting a solution for [Preact](https://github.com/developit/preact/), I set out to see how hard a de-coupled library would be. Instead of assuming one of the aforementioned libraries, the `compose` function accepts the Base Component Class (`React.Component`, `InfernoComponent`, ...) and the hyperscript function (`React.createElement`, `Preact.h`, ...) as the first two parameters.

### Installation

```
$ npm install --save classless-component
```

### Usage

As this is in rapid development, and by no means stable, please refer to the `test.js` file for working examples.

### `Functions as params are deprecated.`

Previously, the following worked:
```javascript
const Comp = compose(Component, Preact.h,
  function componentWillMount () {
    ...
  }
)
```

And the name of the function would be magically assigned to a new object. This caused issues when using UglifyJS to minify the code (as the function referance name was no longer guaranteed).

Instead, each param should be an explicit object with property names for `render`, `componentDidMount`, etc.

### Acknowledgments

Based on [preact-classless-component](https://github.com/laurencedorman/preact-classless-component) by Laurence Dorman.

### License

MIT

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