react-husen

husen(sticky note) for react

Usage no npm install needed!

<script type="module">
  import reactHusen from 'https://cdn.skypack.dev/react-husen';
</script>

README

react-husen

Overview
npm version

demo

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

Feature

drag & drop

husen events

additional info

inline edit

Todo

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