Giter Site home page Giter Site logo

react-sticky-notes's Introduction

React Sticky Notes

A lightweight react component to handle stickies, notes and reminders without any single dependencies(like jQuery) except React.

Demo

https://react-latest-ui.github.io/react-sticky-notes/

Sticky Notes for React Application

Installation

Install the React Sticky Notes package package using npm:

npm install @react-latest-ui/react-sticky-notes --save

Setting Up

git clone https://github.com/react-latest-ui/react-sticky-notes.git
npm install
npm start run

Features

  • Pure React Sticky Notes
  • Draggable & Resizable Stickies
  • Inline Content Editable
  • Configurable Sticky Colors

Usage

import React, { Component } from 'react';
import ReactStickyNotes from '@react-latest-ui/react-sticky-notes';

class MyApp extends Component {
	constructor(props) {
		super(props);
	}  
	render() {
		return (
			<ReactStickyNotes />
		)
	}
});

React Stickies Props

sessionKey: ?String,
colors: ?Array = [HexCodes],
notes: ?Array = [{
	color: ?HexCode,
	text: ?String
}],
containerWidth: ?String{px|%},
containerHeight: ?String{px|%},
noteWidth: ?Number,
noteHeight: ?Number,
footer: ?Boolean = {true|false},
onBeforeChange: (type:String, payload:Object, notes: Array) => {
	return payload;
}
onChange: (type:String, payload:Object, notes: Array) => {

}

Contribute

If you have a feature request, please add it as an issue or make a pull request.

TODO List

  • Basic Notes with CRUD
  • Resizable
  • Draggable
  • Responsive to all devices/desktop
  • Import notes from JSON/CSV
  • ----

react-sticky-notes's People

Contributors

7mmsingh31246 avatar kmshin1397 avatar dependabot[bot] avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.