JSPM

react-draggable-slider

0.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9
  • Score
    100M100P100Q52100F
  • License MIT

Smooth draggable React slider for project items using Spring and GSAP

Package Exports

  • react-draggable-slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-draggable-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

This project is created to simplify the process of publishing a React component to npm. For a full tutorial on publishing React component to npm, please refer to this guide

Guide

  1. Replace contents in /src with your React component.

  2. Edit webpack.config.js, replace the following:

    1. entry: './src/YOUR_COMPONENT.js' Replace value of entry to path to the entry point of your component.
    2. Replace output.filename to the name of your component
        output: {
            path: path.resolve('lib'),
            filename: 'YOUR_COMPONENT.js',
            libraryTarget: 'commonjs2',
      },
  3. Edit package.json, replace the following:

    1. "name": "YOUR_PACKAGE_NAME" Replace the value of name to your package name. This will be the name of the package that is published to npm and the name that is used when other people install your package using npm install YOUR_PACKAGE_NAME.
    2. Update the values of version and description to accordingly.
    3. "main": "./lib/YOUR_COMPONENT.js" replace YOUR_COMPONENT.js with the name that you've set in output.filename during Step #2
    4. If your component uses any other dependencies, make sure to add them into the peerDependencies list.
  4. Building your component by running npm build in your command line. This would generate the folder /lib which includes your component.

  5. Publishing to npm

    1. Make sure you've registered an npm account
    2. Run npm login in your command line, and enter your credentials.
    3. Run npm publish, and your React component will be uploaded to npm! You can find it at https://www.npmjs.com/package/[YOUR PACKAGE NAME] or your npm profile.
  6. To update your package, make sure you remember to increment the version in package.json, and then perform Step #5 again.