SimpleSigner / react-bootstrap-drawer

Drawer (Sidenav) Inspired by React Bootstrap Documentation
MIT License
15 stars 3 forks source link

Provide react-bootstrap Level of Support #3

Open SimpleSigner opened 2 years ago

SimpleSigner commented 2 years ago

As raised by @richtera - the library lacks Typescript definitions, and does not support the use of ref as our functional components need to make use of React.forwardRef.

See:

SimpleSigner commented 2 years ago

See: https://www.carlrippon.com/creating-react-and-typescript-apps-with-webpack/

SimpleSigner commented 2 years ago

The following is required to support JSX syntax inside of .ts files, it appears @babel/preset-typescript expects one to use the .tsx file extension to automagically pick up on the syntax. Without this configuration, the transpiler assumes the <div> syntax represents some form of type declaration, rather than JSX for a <div> element.

[
  '@babel/preset-typescript',
  {
    allExtensions: true,
    isTSX: true,
  }
],

See: https://babeljs.io/docs/en/babel-preset-typescript

SimpleSigner commented 2 years ago

One will need to use a multi-phase compilation project, first using tsc (via npm install --save-dev typescript) to type check the project and generate the type definitions, second using Webpack / Babel to generate the JS bundle.

See: https://www.typescriptlang.org/docs/handbook/babel-with-typescript.html

SimpleSigner commented 2 years ago

The forwardRef issue was not specifically because of references but because of a mismatch between react-bootstrap versions. Added a peerDependency definition to avoid this problem in the future.

SimpleSigner commented 2 years ago

See: https://github.com/SimpleSigner/react-bootstrap-drawer/pull/4