https://github.com/rhysd/react-vimjs

Vim in Your Web App
https://github.com/rhysd/react-vimjs

emscripten react react-component vim

Last synced: 9 days ago
JSON representation

Vim in Your Web App

• Host: GitHub
• URL: https://github.com/rhysd/react-vimjs
• Owner: rhysd
• License: other
• Created: 2015-10-05T11:32:57.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-02-24T09:38:21.000Z (almost 9 years ago)
• Last Synced: 2024-12-05T10:36:21.762Z (24 days ago)
• Topics: emscripten, react, react-component, vim
• Language: JavaScript
• Homepage: https://rhysd.github.io/react-vimjs
• Size: 9.11 MB
• Stars: 166
• Watchers: 4
• Forks: 8
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![React TRUE Vim Component](https://raw.githubusercontent.com/rhysd/react-vimjs/master/misc/react-vimjs-bannar.jpg)

========================

[![Build Status](https://travis-ci.org/rhysd/react-vimjs.svg)](https://travis-ci.org/rhysd/react-vimjs)

This is a [Vim.js](https://github.com/coolwanglu/vim.js) component for [React.js](https://facebook.github.io/react/).  You can easily introduce Vim into your React.js web application.

Please try [Markdown Demo](http://rhysd.github.io/react-vimjs/).  The source code of this demo is [here](example).

## Install

Install via [npm](https://www.npmjs.com).

```

$ npm install react-vimjs

```

## Usage

### Basic Usage

You can use `` component.

- `index.js`

```javascript

import React from 'react'

import Vim from 'react-vimjs'

React.render(

   Loading... ,

  document.body

);

```

- `index.html`

```html

  

    

    Hello, react-vimjs

    

  

  

  

  

  

```

You need to link `vim.css` in `dist` directory and load `vim.js` with `` tag after loading your `index.js`.  And set path to `vim.js.mem` as property of `<Vim>` component.

`<Vim>` has many other optional properties. (Document is TODO)

Basically all files are put on memory so it is volatile after closing the page.  Only `.vimrc` is saved to local storage.

### Edit Local File

You can load local file with file chooser easily with `<FileUpload>` component.

```javascript

import Vim,{FileUpload} from 'react-vimjs'

React.render(

  <div>

    <Vim memPath="path/to/vim.js.mem"> Loading... </Vim>

    <FileUpload onUpload={(dir, name) => alert("Loaded " + dir + "/" + name)}>

      <button type="button">

        Edit Local File

      </button>

    </FileUpload>

  </div>,

  document.body

);

```

Children of `<FileUpload>` component gets clickable.  When clicked, `<input>` file chooser is launched and you can select a file.  If `onUpload` property is set, it is called with the path to loaded file after loading the file is success.  When `blah.txt` is selected, `/root/blah.txt` is created in Emscripten filesystem and you can open it with `:edit blah.txt`.