@mskcc/components-react
v2.1.0
Published
**Deprecated**: This package has been deprecated. We recommend using `@mskcc/carbon-react`instead.
Downloads
137
Keywords
Readme
Deprecated: This package has been deprecated. We recommend using @mskcc/carbon-react
instead.
DSM React Component TypeScript and JavaScript transpiler.
This setup is meant for developing React component libraries that can be published to NPM.
Get Started
# npm
npm install @mskcc/components-react
# yarn
yarn @mskcc/components-react
Import into your component
import { Header, Footer } from '@mskcc/components-react';
If you get a hook error, you'll need to point
component-react
to the package'sreact and react-dom
you're trying to run.// in demo-react-spa directory cd node_modules/react && npm link cd .../react-dom && npm link // Go to components-react direction npm link react npm link react-dom
How it works
- This package builds to
/dist
. - New components are to be housed in
src/ts
with it being exported fromsrc/index.ts
.- Components are written in TypeScript, then transpiled to JavaScript.
demo
directory has a lightweight page that will render your component.- The default demo imports and live reloads whatever is in
/dist
. No symlinking required via Parcel's aliasing.
Code Quality
Code quality is set up for you with prettier
and eslint
. Adjust the respective fields in package.json
accordingly.
Setup Files
This is the folder structure we set up for you:
/demo
index.html # add cdn and other header elements here
index.tsx # add your component
package.json
tsconfig.json
/src
index.ts # export all your components here
/components # house your components here
rollup.config.js # config file for transpiling to CJS, ESM, UMD
tsconfig.json # config file to handle and compiling TypeScript files
Rollup
This package uses Rollup as a bundler and generates multiple rollup configs for various module formats and build settings.
TypeScript
tsconfig.json
is set up to interpret dom
and esnext
types, as well as react
for jsx
. Adjust according to your needs.
Module Formats
CJS, ESModules, and UMD module formats are supported.
The appropriate paths are configured in package.json
and dist/index.js
accordingly.
Deploying the demo Playground
The Playground is just a simple Parcel app, you can deploy it anywhere you would normally deploy that.
# components-react/demo/package.json
npm run build # builds to dist
Named Exports
always use named exports. Code split inside your React app instead of your React library.
Including Styles
- CSS-in-JS
- We can inject the style sheet into the component (TBD)