React Demos
plug and play React components to show off your backend tech by implementing a small set of methods! Done in TypeScript because I like React + TypeScript. Use this as an easy demo to show off your backend integrations. (e.g. React + Firebase, React + AWS Amplify, React + Node/Express/Mongo, etc.)
goes without saying - none of these are meant for production!
Installation
npm i react-demos
Chat Example
Here are the schemas of the 2 models used:
AWS AppSync model
type User @model { id: ID! name: String isOnline: Boolean} type Message @model { id: ID! user: String text: String}
Todo Example
TodoMVC with a clean React implementation (no Redux).
Live Demo: react-todomvc.netlify.app
Usage
The core of this package is a <Todos>
component that takes 5 props:
todos: TodoType[]
: an array ofTodoType
objectsaddNewTodo: (value: string) => Promise<void>
: callback for adding a new todoupdateTodo: (modifiedTodo: PartialTodoType) => Promise<void>
: update the value or completion state of a Todo by itsid
deleteTodo?: (id: string) => Promise<void>
: optional callback for deleting a todo by IDclearCompletedTodos?: () => void
: optional callback for clearing completed todos (if omitted, the corresponding button won't show)todosTitle?: string
: optional string - to customize the title shown. defaults to"React-TodoMVC"
.
For demo purposes, a sample implementation is provided from useTodosLocalState
. The intent is that you will swap out these functions for your own as you implement your backend.
const App = { // FOR DEMO CREATOR: replace this with your impl! const props = // // must implement // todos: TodoType[] // function addNewTodo(value: string): Promise<void>` // function updateTodo(modifiedTodo: PartialTodoType): Promise<void>` // // optional // function deleteTodo(id: string): Promise<void> // function clearCompletedTodos(): void // todosTitle?: string return <div> <Todos ...props /> </div> } ReactDOM
If you want something that persists in localstorage, you can use useTodosLocalStorageState
instead. It has the same API as useTodosLocalState
.
List of Implementations
- AWS Amplify + AppSync: tbd
- Firebase: tbd
- Netlify + FaunaDB: tbd
Acknowledgements
The http://todomvc.com/ project
the todomvc.css
was combined from todomvc-app-css
and todomvc-common
.