import { VeltInlineReactionsSection } from '@veltdev/react';

export default function App() {

  return (
      <section id="container-id">
        <div>Your Article</div>

        <VeltInlineReactionsSection
          targetReactionElementId="container-id"
        />

      </section>  
  );
}
1

Import Velt Inline Reactions Section component

Import the VeltInlineReactionsSection component.
import { VeltInlineReactionsSection } from '@veltdev/react';
2

Add container to hold Inline Reactions component

  • Create an element to hold your Inline Reactions component, such as a div or section.
  • Add a unique element id to it.
<section id="container-id">
	<div>Your Article</div>
</section>
3

Add VeltInlineReactionsSection component

  • Add VeltInlineReactionsSection component inside your container.
  • Add targetReactionElementId property to the Velt Inline Reactions component. This needs to match the id you set to the container. This binds the Inline Reactions component with the desired container.
<section id="container-id">
	<div>Your Article</div>

	<VeltInlineReactionsSection
		targetReactionElementId="container-id"
	/>

</section>

import { VeltInlineReactionsSection } from '@veltdev/react';

export default function App() {

  return (
      <section id="container-id">
        <div>Your Article</div>

        <VeltInlineReactionsSection
          targetReactionElementId="container-id"
        />

      </section>  
  );
}