hedgedoc/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx
Philip Molares f3bf7cd105
Added reuse information (#782)
Signed-off-by: Philip Molares <philip.molares@udo.edu>
2020-11-22 21:50:07 +01:00

27 lines
712 B
TypeScript

/*
SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file)
SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useEffect, useRef } from 'react'
export interface AbcFrameProps {
code: string
}
export const AbcFrame: React.FC<AbcFrameProps> = ({ code }) => {
const container = useRef<HTMLDivElement>(null)
useEffect(() => {
if (!container.current) {
return
}
const actualContainer = container.current
import(/* webpackChunkName: "abc.js" */ 'abcjs').then((imp) => {
imp.renderAbc(actualContainer, code)
}).catch(() => { console.error('error while loading abcjs') })
}, [code])
return <div ref={container} className={'bg-white text-center'}/>
}