Nanobot: Polygonal Mascot

    react-demos
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.13 • Public • Published

    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

    import * as React from 'react'
    import * as ReactDOM from 'react-dom'
    import { Chat, useChatLocalState } from 'react-demos'
     
    const App = () => {
      const {
        currentUser,
        sendMessage,
        loginUser,
        logoutUser,
        messages,
        usersOnline,
      } = useChatLocalState()
      // // To implement:
      //   currentUser: User | null;
      //   usersOnline: User[];
      //   messages: Message[];
      // /** set currentUser and add them to usersOnline */
      // async function loginUser(name: string) {}
      // /** add to messages by also adding the currentUser */
      // async function sendMessage(text: string) {}
      // /** (optional) unset currentUser and remove from usersOnline */
      // async function logOutUser(id: string) {}
      return (
        <div>
          <Chat
            {...{
              currentUser,
              sendMessage,
              loginUser,
              logoutUser,
              messages,
              usersOnline,
            }}
          />
        </div>
      )
    }

    Here are the schemas of the 2 models used:

    export type User = {
      id: string
      name: string
      isOnline: boolean
    }
    export type Message = { user: string; text: string }
    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

    image

    Usage

    The core of this package is a <Todos> component that takes 5 props:

    • todos: TodoType[]: an array of TodoType objects
    • addNewTodo: (value: string) => Promise<void>: callback for adding a new todo
    • updateTodo: (modifiedTodo: PartialTodoType) => Promise<void>: update the value or completion state of a Todo by its id
    • deleteTodo?: (id: string) => Promise<void>: optional callback for deleting a todo by ID
    • clearCompletedTodos?: () => 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.

    import { Todos, useTodosLocalState } from 'react-demos'
    import 'react-todomvc/dist/todomvc.css' // for styling
     
    const App = () => {
      // FOR DEMO CREATOR: replace this with your impl!
      const props = useTodosLocalState()
      // // 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.render(<App />, document.getElementById('root'))

    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.

    Keywords

    none

    Install

    npm i react-demos

    DownloadsWeekly Downloads

    13

    Version

    0.0.13

    License

    MIT

    Unpacked Size

    214 kB

    Total Files

    32

    Last publish

    Collaborators

    • sw-yx