Initialises a web worker with RDKitModule
instance from @rdkit/rdkit and exposes it via a react context
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
Wrap your components/App with RDKitProvider
import { RDKitProvider } from '@iktos/rdkit-provider';
<RDKitProvider>
<Component />
</RDKitProvider>
you can also enable caching for molecule, which would enhance performance
import { RDKitProvider } from '@iktos/rdkit-provider';
<RDKitProvider cache={{ enableJsMolCaching: true, maxJsMolsCached: 50 }}>
<Component />
</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
import { useRDKitUtils, useRDKit } from '@iktos/rdkit-provider';
const Component = () => {
const { worker } = useRDKit();
const { isValidSmiles } = useRDKitUtils();
const submit = useCallback(
async (smiles) => {
const { isValid } = await isValidSmiles({ smiles });
if (!isValid) return;
// ...
},
[isValidSmiles],
);
if (!worker) return 'loading ...';
return <>...</>;
//...
};
Example of usage can be found in github.com/iktos/molecule-representation