https://github.com/trainyard/choodown

A simple markdown component for choo-js
https://github.com/trainyard/choodown

Last synced: 3 months ago
JSON representation

A simple markdown component for choo-js

• Host: GitHub
• URL: https://github.com/trainyard/choodown
• Owner: trainyard
• Created: 2016-07-18T19:45:51.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-19T00:00:01.000Z (almost 8 years ago)
• Last Synced: 2024-08-01T02:29:31.817Z (5 months ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 14
• Watchers: 5
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-choo - choodown - A simple markdown component for choo. (Uncategorized / Uncategorized)

README

        
[![built with choo v3](https://img.shields.io/badge/built%20with%20choo-v3-ffc3e4.svg?style=flat-square)](https://github.com/yoshuawuyts/choo)

[![npm version](https://badge.fury.io/js/choodown.svg)](https://badge.fury.io/js/choodown)

# Choodown

A simple markdown/textarea component with ability to preview your changes.  Made for choo.

## How to use:

```

npm install choodown -S

```

Add the following to your app model:

```javascript

app.model({

  namespace: 'choodown',

  state: {

    text: '',

    mode: 'EDIT'

  },

  reducers: {

    updateText: (data, state) => ({text: data}),

    toggleMode: (mode, state) => ({mode: state.mode === 'PREVIEW' ? 'EDIT' : 'PREVIEW'})

  }

});

```

Add to your view like this:

```javascript

const choodown = Choodown({

  text: state.choodown.text,

  mode: state.choodown.mode,

  onChange: (e) => send('choodown:updateText', e.target.value),

  onToggle: () => send('choodown:toggleMode')

});

return html`

  

    
Choodown demo

    ${choodown}

  `

```


## Example

You can see a full working example by cloning this repo:

1. clone this repo

2. run `npm install`

3. run `npm start`

4. go to `localhost:8080`