Sticky Notes for React Application (DraftJS Based)
Screencast of stickies
Install the React-Stickies package package using npm:
npm install react-stickies --saveMake sure you have included draftjs styles in your app.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.min.css">- Pure React Sticky Notes
- Draggable & Resizable Stickies
- Inline Content Editable
- Configurable Sticky Colors
- Last Updated TimeStamp
- Configurable Tape
import React, { Component } from 'react'; import ReactStickies from 'react-stickies'; //ES6 class MyFirstStickyNotes extends Component { constructor(props) { super(props); this.state = { notes: [] } this.onChange = this.onChange.bind(this) this.onSave = this.onSave.bind(this) } onSave () { const notes = this.state.notes; notes.map(note => { delete note.editorState; }) } onChange (notes) { this.setState({ notes }) } render() { return ( <ReactStickies notes={this.state.notes} onChange={this.onChange} /> ) } } export default MyFirstStickyNotes; // Tape with sticky note tape: ?Boolean = {true|false}, // Display title on header title: ?Boolean = {true|false}, // Display footer alongside updated timestamp footer: ?Boolean = {true|false}, // Configurable custom sticky notes colors colors: ?Array = [HexCodes], // Grid configuration grid: ?Object = { // These are all in grid units, not pixels w: number, h: number, minW: ?number = 0, maxW: ?number = Infinity, minH: ?number = 0, maxH: ?number = Infinity, // Rows have a static height, but you can change this based on breakpoints // if you like. rowHeight: ?number = 150, // {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480} // Breakpoint names are arbitrary but must match in the cols and layouts objects. breakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}, // # of cols. This is a breakpoint -> cols map, e.g. {lg: 12, md: 10, ...} cols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}, // layouts is an object mapping breakpoints to layouts. // e.g. {lg: Layout, md: Layout, ...} layouts: {[key: $Keys<breakpoints>]: Layout} // Layout is an array of object with the format: // {x: number, y: number, w: number, h: number} // The index into the layout must match the key used on each item component. // If you choose to use custom keys, you can specify that key in the layout // array objects like so: // {i: string, x: number, y: number, w: number, h: number} layout: ?array = null, // If not provided, use data-grid props on children // // Flags // isDraggable: ?boolean = true, isResizable: ?boolean = true, // Uses CSS3 translate() instead of position top/left. // This makes about 6x faster paint performance useCSSTransforms: ?boolean = true, // Callback so you can save the layout. // Calls back with (currentLayout) after every drag or resize stop. onLayoutChange: (layout: Layout) => void, } // // Callbacks // // Callback so you can save the notes. // Calls back when note is updated onChange: (Array | notes, String | state (add/update/delete) ) onTitleChange: (String | text, Object | note) onAdd: (Object | note) onDelete: (Object | note) // // Styles // // Styles which could be modified wrapperStyle: (Object | {} ) noteStyle: (Object | {} ) noteStyle: (Object | {} ) noteHeaderStyle: (Object | {} ) noteBodyStyle: (Object | {} ) noteFooterStyle: (Object | {} )If you have a feature request, please add it as an issue or make a pull request.
- Basic Notes with CRUD
- Draggable Notes
- Update Notes state
- Notes position handling
- Resizable handles on corners
- ----