@odopod/odo-hotspots
npm i @odopod/odo-hotspots

@odopod/odo-hotspots

A collection of vanilla JavaScript components used in Odopod projects.

by odopod

1.2.1 (see all)License:MITTypeScript:Not Found
npm i @odopod/odo-hotspots
Readme

Odopod Code Library (Odo) Build Status

A collection of vanilla JavaScript components used in Odopod projects.

Want to contribute to Odo?

Take a look at CONTRIBUTING.md.

Packages

The Odo repo is managed as a monorepo; it's composed of many npm packages.

PackageVersion
@odopod/odo-affixnpm
@odopod/odo-background-videonpm
@odopod/odo-base-componentnpm
@odopod/odo-carouselnpm
@odopod/odo-devicenpm
@odopod/odo-dialognpm
@odopod/odo-draggablenpm
@odopod/odo-dropdownnpm
@odopod/odo-dual-viewernpm
@odopod/odo-expandablenpm
@odopod/odo-helpersnpm
@odopod/odo-hotspotsnpm
@odopod/odo-modulenpm
@odopod/odo-object-fitnpm
@odopod/odo-on-swipenpm
@odopod/odo-pointernpm
@odopod/odo-responsive-attributesnpm
@odopod/odo-responsive-classesnpm
@odopod/odo-responsive-imagesnpm
@odopod/odo-revealnpm
@odopod/odo-sassplatenpm
@odopod/odo-scroll-animationnpm
@odopod/odo-scroll-feedbacknpm
@odopod/odo-sharenpm
@odopod/odo-sticky-headersnpm
@odopod/odo-tabsnpm
@odopod/odo-tapnpm
@odopod/odo-videonpm
@odopod/odo-viewportnpm
@odopod/odo-window-eventsnpm

Tips for advanced webpack configuration

If you use webpack (or another bundler) for your project and are already using a compiler for your JavaScript (like babel), you have the option of using odo component source files and compiling them with your project.

This has a couple benefits:

  • No dependencies for odo are bundled with their dist files. For example, the debounce package is bundled in a couple odo components.
  • Use the same babel preset for your app's code and odo components. Maybe you're using babel-preset-env so that you can compile less.

Use the alias object to map requests for odo components to their source files instead of dist files. This configuration is intended for webpack 2, 3, or 4.

// Webpack config
{
  resolve: {
    alias: {
      '@odopod/odo-carousel$': '@odopod/odo-carousel/src/carousel.js',
      '@odopod/odo-device$': '@odopod/odo-device/src/device.js',
      '@odopod/odo-draggable$': '@odopod/odo-draggable/src/draggable.js',
      '@odopod/odo-helpers$': '@odopod/odo-helpers/src/helpers.js',
      '@odopod/odo-pointer$': '@odopod/odo-pointer/src/pointer.js',
    },
  },
}

Don't exclude odo components from being compiled with babel.

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules\/(?!@odopod\/odo-)/,
      loader: 'babel-loader',
    },
  }
]

Downloads/wk

21

GitHub Stars

29

LAST COMMIT

4yrs ago

MAINTAINERS

3

CONTRIBUTORS

3

OPEN ISSUES

0

OPEN PRs

1
VersionTagPublished
1.2.1
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial