Melody Documentation
  • Why Melody?
  • Quickstart
    • What is Melody?
    • Tutorial
    • Installation
  • Templates
    • Twig
    • Mounting Components
    • Keys and Loops
    • Attributes
    • CSS Classes
    • Inline Styles
    • Refs
    • CSS Modules
  • Melody-Streams
    • Basic concept
    • A Step-by-Step Walkthrough
  • MELODY-STREAMS API
    • createComponent
    • The component function
  • melody-hooks
    • Overview
    • Rules of Hooks
    • Event Handling
    • Separation of Concerns
  • melody-hooks API
    • useState
    • useAtom
    • useEffect
    • useRef
    • useCallback
    • useMemo
    • useReducer
    • usePrevious
  • melody-component
    • Overview
  • melody-hoc
    • Overview
Powered by GitBook
On this page

Was this helpful?

  1. Melody-Streams

Basic concept

PreviousCSS ModulesNextA Step-by-Step Walkthrough

Last updated 5 years ago

Was this helpful?

melody-streams is based on a simple, yet rather complex, metaphor: A component takes multiple input streams and combines them into a single stream of state.

These input streams can be properties which are passed into the component from its parent, or it could be a stream of global event changes coming from, for example, a Redux store. They could also include user events such as click or keyboard events.

We wanted to avoid that you have to learn a new, foreign tool, therefore we decided to build our melody-streams API directly on top of , a well known and widely spread library for handling observables in JavaScript.

Rx.js