# rift-ui

> Rift is a swift-ui inspired framework for the web.

Latest version **1.1.0** (published 2019-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install rift-ui
pnpm add rift-ui
yarn add rift-ui
bun add rift-ui
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-07-05 |
| First published | 2019-07-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 103.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Josh Parrett |
| Maintainers | jtparrett |

## Links

- npm: https://www.npmjs.com/package/rift-ui
- Repository: https://github.com/jtparrett/rift-ui
- Homepage: https://github.com/jtparrett/rift-ui#readme
- Issues: https://github.com/jtparrett/rift-ui/issues
- npm.io page: https://npm.io/package/rift-ui

## Recent versions

- 1.1.0 (latest) — 2019-07-05
- 1.0.9 — 2019-07-05
- 1.0.8 — 2019-07-02
- 1.0.7 — 2019-07-02
- 1.0.6 — 2019-07-02
- 1.0.5 — 2019-07-02
- 1.0.4 — 2019-07-02
- 1.0.3 — 2019-07-02
- 1.0.2 — 2019-07-01
- 1.0.1 — 2019-07-01
- 1.0.0 — 2019-07-01

## README

# Rift UI

Rift is a swift-ui inspired framework for the web.

**This is just a concept**

Performance has not been considered for this project, it's just for fun!

## Installation

`npm i rift-ui --save`
or
`yarn add rift-ui`

## Usage

```
import {Root, View, Text} from 'rift-ui'

const App = View(
  Text('Welcome to my app!', 'h1').fontSize('20px').color('red'),
  Text('It rocks...'),
  Button('Click Me').onClick(() => console.log('wow'))
)

Root(document.getElementById('root), App)
```

### Components

```
import {
  Component, // Base component class for extending new HTML element types
  Root,
  View,
  Text,
  Button,
  Img,
  ForEach,
  If,
  Stack,
  HStack,
  VStack
}
```

### Styling

Styling can be chained onto components like so:

```
  Text('My Text')
    .color('red')
    .borderRadius('200px')
    .height('100px')
```

### State

Functional components are injected with state like so:

```
  const MyComponent = (state = initialState, setState) => {
    return Text(state.text).onClick(() => {
      setState({
        text: 'wow!'
      })
    })
  }

  const App = View(
    MyComponent
  )
```

### Props

```
  const MyComponent = (...props) => {
    return Text(props.text)
  }

  const App = View(
    MyComponent(props here...)
  )
```

### Props & State

```
  const MyComponent = (...props) => (state = initialState, setState) => {
    // use state here
    return Text(props.text)
  }

  const App = View(
    MyComponent(props here...)
  )
```

### Events

Current only the onClick event is supported:

```
  Text('My Text')
    .onClick(myFunction)
```

### Attributes

There is a special .attr method for adding attributes to an element:

```
  Text('My Text')
    .attr('data-thing', true)
```

### Method Components

Rift UI currently supports `ForEach` and `If` components, used like so:

```
  const App = View(
    ForEach(array, (item) => Text(Item)),
    If(thingIsTrue, Text('It is true!'))
  )
```

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