@iktos/molecule-representation v1.0.0

molecule-representation

Interactif molecule represnetations as react components

usage

wrap your components in an RDKit provider

import { RDKitProvider } from '@iktos/molecule-representation';
<RDKitProvider>
  <Component />
</RDKitProvider>

render molecule

import { MoleculeRepresentation, MoleculeRepresentationProps } from '@iktos/molecule-representation';
const props: MoleculeRepresentationProps = {
  smiles: 'Cc1cccc(-c2ccccc2)c1',
  addAtomIndices: true,
  bondsToHighlight: [
    [1, 0],
    [3, 4],
  ],
  atomsToHighlight: [
    [1, 0],
    [3, 4],
  ],
  height: 200,
  width: 300,
  onAtomClick: (atomId: string) => console.log(atomId),
};
<MoleculeRepresentation {...props} onAtomClick={} />

launch storybook to see all available options

    yarn install
    yarn storybook