https://github.com/ryota-ka/cycle-ink-driver

Ink driver for Cycle.js
https://github.com/ryota-ka/cycle-ink-driver

cyclejs ink

Last synced: 2 days ago
JSON representation

Ink driver for Cycle.js

• Host: GitHub
• URL: https://github.com/ryota-ka/cycle-ink-driver
• Owner: ryota-ka
• Created: 2019-05-11T11:33:42.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T03:04:54.000Z (about 1 year ago)
• Last Synced: 2024-09-06T22:12:21.041Z (27 days ago)
• Topics: cyclejs, ink
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/cycle-ink-driver
• Size: 62.5 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# cycle-ink-driver

[![npm](https://img.shields.io/npm/v/cycle-ink-driver.svg)](https://www.npmjs.com/package/cycle-ink-driver) [![CircleCI](https://circleci.com/gh/ryota-ka/cycle-ink-driver/tree/master.svg?style=shield)](https://circleci.com/gh/ryota-ka/cycle-ink-driver/tree/master)

[Ink](https://github.com/vadimdemedes/ink) driver for [Cycle.js](https://cycle.js.org/)

## Example

```typescript

/** @jsx createIncorporatedElement */

import { ReactSource } from '@cycle/react';

import { run } from '@cycle/run';

import { createIncorporatedElement, makeInkDriver } from 'cycle-ink-driver';

import { Box } from 'ink';

import TextInput from 'ink-text-input';

import { Stream } from 'xstream';

const sels = {

  name: Symbol('name'),

};

function View({ name }: { name: string }): JSX.Element {

  return (

    

      

        Name:  {}} />

      

      {'-'.repeat(20)}

      Hello {name}

    

  );

}

function main({ react }: { react: ReactSource }): { react: Stream } {

  const name$ = react.select(sels.name).events('change').startWith('');

  const view$ = name$.map((name) => View({ name }));

  return {

    react: view$,

  };

}

const drivers = {

  react: makeInkDriver(),

};

run(main, drivers);

```

![screencast](./docs/screencast.gif)