rdkit-provider

Initialises a web worker with RDKitModule instance from @rdkit/rdkit and exposes it via a react context

Setup

Assets

The project using this package needs to provide it with RDKit package assets

After installing @rdkit/rdkit copy to your public folder node_modules/@iktos-oss/rdkit-provider/lib/rdkit-worker*.js node_modules/@rdkit/rdkit/dist/RDKit_minimal.js node_modules/@rdkit/rdkit/dist/RDKit_minimal.wasm

Usage

Wrap your components/App with RDKitProvider

1import { RDKitProvider } from '@iktos/rdkit-provider';
2<RDKitProvider>
3  <Component />
4</RDKitProvider>

you can also enable caching for molecule, which would enhance performance

1import { RDKitProvider } from '@iktos/rdkit-provider';
2<RDKitProvider cache={{ enableJsMolCaching: true, maxJsMolsCached: 50 }}>
3  <Component />
4</RDKitProvider>

Options that can be passed to RDKitProvider :

prop	type	functionality	required/optional
cache	RDKitProviderCacheOptions = { enableJsMolCaching?: boolean; maxJsMolsCached?: number; }	enables JSMol caching for better performance	optional
preferCoordgen	boolean	will be passed to @rdkit/rdkitjs prefer_coordgen to use Schrodinger’s open-source Coordgen library to generate 2D coordinates of molecules	optional
removeHs	boolean	toggles removing hydrogens molecules. Defaults to true	optional
initialWorkerInstance	Worker instance of rdkit-worker.js	pass an rdkit worker instance, if not passed rdkit-provider creates one for you	optional
rdkitPath	string default to /RDKit_minimal.js in initRDKit.ts	pass a custom path to rdkit module	optional
rdkitWorkerPublicFolder	string, default is '', meaning the file is at the root level of the public folder	path to the folder containing the rdkit-worker-[version].js relative to the public folder	optional

You can make use of a set of helper functions exposed by the package

1import { useRDKitUtils, useRDKit } from '@iktos/rdkit-provider';
2
3const Component = () => {
4  const { worker } = useRDKit();
5  const { isValidSmiles } = useRDKitUtils();
6  const submit = useCallback(
7    async (smiles) => {
8      const { isValid } = await isValidSmiles({ smiles });
9      if (!isValid) return;
10      // ...
11    },
12    [isValidSmiles],
13  );
14
15  if (!worker) return 'loading ...';
16  return <>...</>;
17  //...
18};

Example of usage can be found in github.com/iktos/molecule-representation