Code Monkey home page Code Monkey logo

react-quietwater's Introduction

build status npm package npm downloads npm license

What is React-QuietWater?

React-QuietWater is a comment system based on react, react-css-modules and redux-orm.Its UI draw on zhihu and medium, and think about something from twitter,facebook,quora and other design websites.

If you are interested in its origin,you can view this

Installation

npm install react-quietwater --save

React-QuiertWater is based on React 16,though now it's in alpha,but this summer(2017) it will be released.Although now we don't use much features in this repo(e.g. <ErrorBoundary>),but for future,we need to be familiar with next version of React, so that's why I use it now.If you don't want to use React 16 in your project,sorry for that this repo can't work.

Demo

You can view the online example.And please note that although we use mock data(by easy-mock) for the example but maybe the data don't have correct logic like the real world.This demo is just for showing the UI and the basic logic.But if you want to improve this,pr is always welcomed.

NOTE: Some functions like praise/thumbdown a reply,submit reply/comment are allowable only when you have logined. So for testing React-QuietWater expediently.Default our test api interface doesn't return a token of the user.So We provide a token,you can set it to your config.localStorage.info2Storage.userToken (default the value is 'u_tk', i.e set localstorage.u_tk to the token value).And then you can test these functions otherwise it will redirect to the login page which you set.

NOTE: For now we just support browserHistory.If you use hashHistory,some modules maybe can't work.

Documentation

  • NOTE: We would like to see any pr/(UI design)/(feature request)/enhancement based on our Name origin,but if they breaches our Motivation,we won't accpt them,so we recommend you fork or just copy our repo and modify it to whatever you want.

All you need to do is complete the config options according to your use case.

F & Q

You can view this to know some F & Q.

Design thinking

If you are Chinese,please believe that we have looked through

Thanks for everyone who gives good advice in the comments of above question.They inspire me a lot,thanks!

We would like to listen and appreciate all issues/suggestions about whatever aspects.But please don't just complain ,that's very rude and meaningless.Please don't just think about yourself's thoughts or experience and think them are the best design or blue print.

If you have any good thought,feel free to file an issue or a pr!If you are friendly,we would like to join the discussion,if not,we also accept but you have to prove your thoughts are acceptable by most people and provide feasible scheme.So,if you are not friendly and can't prove and provide.We will don't reply the issue and close it.

License

MIT

react-quietwater's People

Contributors

ne-smalltown avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

react-quietwater's Issues

Todo List

Probably to do

  • convert the image of loading to base64 rather than an online url #2
  • support en-us language #3
  • toggle chrome repaint settings to find and avoid unnecessary component repaint
  • make we can edit config and show corresponding UI and download the config
  • upgrade webpack to 3 #6
  • decrease dependencies
  • make example page more real(i.e. use a post or goods rather than repeating 'this is my website content' string)
  • reply can be modified
  • reply can be deleted #5
  • comment can be modified
  • comment can be deleted
  • use <ErrorBoundary> to handle network error
  • add alt attribute
  • add quietWater or qw namespace of the global style which used by React-QuietWater
  • add more social app sharing ways. e.g. twitter,facebook
  • more exact and reasonable algorithm of reply excerpt
  • make reply can be sorted
  • replace to a better editor
  • limit comment content word size
  • make globalconfig as a prop of <QuietWater /> component rather than a module
  • the added comment should be appended to the last page's last item rather than current page's last item
  • provide alternative backend SQL statement

Maybe to do

  • make images in the reply be lazily load on the mobile environment
  • make reply item and comment item have their own route(e.g. comment/123456) to display the content
  • make we can reference a part of other comments when we comment like medium
  • add a option to load conversation from redux's store rather than backend
  • add options to define icons which used by React-QuietWater
  • add notification
  • make we can use @ in comment or reply

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.