Plant Uml example for react and C4

compare.md

!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml

@startuml 
Person(personAlias, "Label", "Optional Description")
Container(containerAlias, "Label", "Technology", "Optional Description")
System(systemAlias, "Label", "Optional Description")
System(holla, "Holla", "Optional Description")

Rel(personAlias, containerAlias, "Label", "Optional Technology")
Rel(personAlias, holla, "Label", "Optional Technology")
Rel(holla, holla, "Label", "Optional Technology")
@enduml

!includeurl https://raw.githubusercontent.com/matthewjosephtaylor/plantuml-style/master/style.pu
skinparam monochrome false

@startuml
title Radar

class Redux << (P,yellow) Provider>> {
    ~store
}

class RadarContainer << (C,red) container>> {
    ~store
}

class ControlContainer << (C,red) container>> {
    ~store
    ==methods==
    +handleEvents()
}

class SweepContainer << (C,red) container>> {
    ~store
    ==props==
    # radius:number
    # hubRadius: number
}

class Bezel << (C,blue) component >> {
    ==props==
    # radius: number
}

class Display << (C,blue) component >> {
    ==props==
    # svgHeight: number
    # svgWidth: number
    # diameter: number
    # radius: number
    # hubRadius: number
}

class Hub << (C,blue) component >> {
    ==props==
    # radius:number
}

class Sweep << (C,blue) component >> {
    ==propsdd==
    #dim:object
}

class RadarControls << (C,blue) component >> {
    ==props==
    # controls:array
    # controlHandler()
    ==methods==
    +handleToggleEvents()
}

class Toggle << (C,blue) component >> {
    ==state==
    # value
    ==props==
    # id: number
    # label: string
    # onClick()
}

class "StartStop:Toggle" << (C,lightblue) instance >>

Redux <..> RadarContainer
Redux <..> ControlContainer
Redux <..> SweepContainer
RadarContainer *-- SweepContainer
RadarContainer *-- ControlContainer

RadarContainer o-- Display

Display o-- Bezel
Display o-- Hub

SweepContainer o-- Sweep

ControlContainer o-- RadarControls
ControlContainer "handleEvents" <.. "controlHandler" RadarControls
RadarControls o-- Toggle
RadarControls "handleToggleEvents" <.. "onClick" Toggle

Toggle <|-- "StartStop:Toggle"
@enduml

// example.ts#L6-L18

  static propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
  };

  constructor(props) {
    super(props);
  }

  render() {
    return <div className={styles.base}></div>;
  }
}

hello