React + lightbox > don't seems to work.

[Gloreau]

Hello everyone sorry I'm a bit of a newb.

I'm using react and did this :

• npm install simplelightbox
• import SimpleLightbox from "simplelightbox" - wich is highlighted with two errors in vscode (";SimpleLightbox' is declared but its value is never read; Could not find a declaration file for module 'simplelightbox'. 'c:/Users/lorea/Desktop/Work/Code/Projets/Portfolio/portfolio/node_modules/simplelightbox/dist/simple-lightbox.js' implicitly has an 'any' type.Try npm i --save-dev @types/simplelightbox if it exists or add a new declaration (.d.ts) file containing `declare module 'simplelightbox';)

I did add the path to imgs in the tag but do not seems to work.

Tried to do the npm i --save-dev @types/simplelightbox but error : npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fsimplelightbox - Not found npm ERR! 404 npm ERR! 404 '@types/simplelightbox@latest' is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

[MestreDosMagros]

Same here with Angular 12 and Typescript

import {SimpleLightbox} from "node_modules/simplelightbox/dist/simple-lightbox.min.js";

'SimpleLightbox' is declared but its value is never read.ts(6133) Could not find a declaration file for module 'node_modules/simplelightbox/dist/simple-lightbox.min.js'. '.../node_modules/simplelightbox/dist/simple-lightbox.min.js' implicitly has an 'any' type. Try npm i --save-dev @types/simplelightbox if it exists or add a new declaration (.d.ts) file containing declare module 'node_modules/simplelightbox/dist/simple-lightbox.min.js';ts(7016)

import SimpleLightbox from "simplelightbox";

Could not find a declaration file for module 'simplelightbox'. '.../node_modules/simplelightbox/dist/simple-lightbox.js' implicitly has an 'any' type. Try npm i --save-dev @types/simplelightbox if it exists or add a new declaration (.d.ts) file containing declare module 'simplelightbox';ts(7016)

import SimpleLightbox from "simplelightbox/dist/simple-lightbox.esm";

Could not find a declaration file for module 'simplelightbox/dist/simple-lightbox.esm'. '.../node_modules/simplelightbox/dist/simple-lightbox.esm.js' implicitly has an 'any' type. Try npm i --save-dev @types/simplelightbox if it exists or add a new declaration (.d.ts) file containing declare module 'simplelightbox/dist/simple-lightbox.esm';ts(7016)

And i dit put the script src and css in the angular.json like this:

"styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/simplelightbox/dist/simple-lightbox.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/simplelightbox/dist/simple-lightbox.min.js" ]

[WalrusSoup]

I threw together a simple version of the bindings that worked for my needs. Should work for fixing TS issues.

// shims-lightbox.d.ts
declare module "simplelightbox" {
    interface SimpleLightbox {
        new (element: string, options?: SimpleLightboxOptions): SimpleLightbox;
        destroy(): void;
    }
    interface SimpleLightboxOptions {
        captionPosition: string
        captionsData: string
    }
    const SimpleLightbox: SimpleLightbox;
    export = SimpleLightbox;
}