# react-husen

> husen(sticky note) for react

Latest version **0.1.1** (published 2018-11-01) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install react-husen
pnpm add react-husen
yarn add react-husen
bun add react-husen
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2018-11-01 |
| First published | 2018-08-09 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | tkhr.sait |
| Keywords | react, husen, sticky note |

## Links

- npm: https://www.npmjs.com/package/react-husen
- Repository: https://github.com/tkhr-sait/react-husen
- Homepage: https://tkhr-sait.github.io/react-husen
- Issues: https://github.com/tkhr-sait/react-husen/issues
- npm.io page: https://npm.io/package/react-husen

## Dependencies (4)

- [uuid](https://npm.io/package/uuid.md) ^3.3.2
- [react-dnd](https://npm.io/package/react-dnd.md) ^5.0.0
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^5.0.1
- [react-dnd-touch-backend](https://npm.io/package/react-dnd-touch-backend.md) ^0.5.1

## 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

- 0.1.1 (latest) — 2018-11-01
- 0.1.0 — 2018-10-23
- 0.0.9 — 2018-09-09
- 0.0.8 — 2018-08-15
- 0.0.7 — 2018-08-13
- 0.0.6 — 2018-08-13
- 0.0.5 — 2018-08-12
- 0.0.4 — 2018-08-10
- 0.0.3 — 2018-08-10
- 0.0.2 — 2018-08-10
- 0.0.1 — 2018-08-09

## README

# react-husen

Overview  
[![npm version](https://badge.fury.io/js/react-husen.svg)](https://badge.fury.io/js/react-husen)  

[demo](https://tkhr-sait.github.io/react-husen/)

## Description

husen(sticky note) for react

## Requirement

react  
react-dnd  
uuid  

## Install

```
npm i react-husen
```

## Usage

### minimal

```
import React, { Component } from 'react';
import HusenBoard from 'react-husen';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <HusenBoard />
      </div>
    );
  }
}

export default App;
```

### customize

```
import React, { Component } from 'react';
import HusenBoard from 'react-husen';
import './App.css';

class App extends Component {
  constructor(props){}
    this.state = {
      notes: [
        {
          title: "test1"
        },
        {
          id: "2",
          title: "test2",
          description: "description",
          x: 64,
          y: 32,
          items: {user: "test2",timestamp: "2000-01-01 00:00:00"}
        }
      ]
    }
  }

  // husen event
  handleNoteClick(note){
  }
  handleNoteAdd(note){
  }
  handleNoteDelete(note){
  }
  handleNotesChange(notes){
    // update state
    this.setState({notes: notes})
  }
  handleNoteInitialize(note){
    // additional items
    note.items.user = note.items.user ? note.items.user : "unknown user"
    note.items.timestamp = note.items.timestamp ? note.items.timestamp : "2000-01-01 00:00:00"
    return note
  }
  handleNoteRendarText(note){
    return(<div style={{height:"100%",width:"100%",position: "relative"}}>
             <span>{note.title}</span>
             <span style={{fontSize: "50%",right:0,bottom:0,position: "absolute"}}>
               {note.items.timestamp}
             </span>
           </div>)
  }
  handleNoteRendarTooltip(note){
    return note.id + "\n" + note.items.user + " wrote:\n" + note.description
  }
  handleContainerRendarLabel(container){
    return(
    <h2 style={{margin: "0.2em 0.4em"}}>
      {container.props.label}
      <button onMouseUp={container.addNewNote.bind(container)} style={{right: 0,top: 0, position: "absolute"}}>Add New Husen</button>
    </h2>)
  }

  render() {
    return (
      <div className="App">
        <HusenBoard 
           label="customize" 
           color="lightgreen"
           defaultTitle="please input title"
           defaultDescription="please input description"
           addButton={false}
           deleteButton={false}
           onNoteClick={this.handleNoteClick.bind(this)}
           onNoteAdd={this.handleNoteAdd.bind(this)}
           onNoteDelete={this.handleNoteDelete.bind(this)}
           onNotesChange={this.handleNotesChange.bind(this)}
           onNoteInitialize={this.handleNoteInitialize.bind(this)}
           onNoteRendarText={this.handleNoteRendarText.bind(this)}
           onNoteRendarTooltip={this.handleNoteRendarTooltip.bind(this)}
           onContainerRendarLabel={this.handleContainerRendarLabel.bind(this)}
           notes={this.state.notes} />
        />
      </div>
    )
  }
}

export default App;
```

### develop

```
git clone https://github.com/tkhr-sait/react-husen.git
cd react-husen
npm i
npm start
```

## Licence

Apache License 2.0

## Author

[tkhr.sait](https://github.com/tkhr-sait)

## Feature

### drag & drop

### husen events

### additional info

### inline edit

## Todo

* [x] drag & drop
* [x] move
* [x] delete button@demo
* [x] edit title/descriotion@demo
* [x] event
* [x] component package
* [x] deploy demo
* [x] additional info
* [x] customize note
* [x] add button@demo
* [x] inline edit
* [ ] improve style
* [ ] save
* [ ] refactoring
* [ ] redux

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