Create an NPM Package from a React component

Yurko Turskiy — Fri, 13 Dec 2019 02:25:57 +0000

I've made the video tutorial on how to create an NPM Package from your React Component. And in this article, I'd like to illustrate it with code. All details you can find in the GitHub repo of this tutorial.

Package setup ./package.json:

{
  "name": "super-lemon",
  "version": "1.0.0",
  "description": "",
  "main": "./build/index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "guandjoy",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.3.0",
    "style-loader": "^1.0.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "@material/react-button": "^0.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0"
  }
}

Babel presets ./.babelrc:

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

Webpack configurations ./webpack.config.js:

var path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve("build"),
    filename: "index.js",
    libraryTarget: "commonjs2"
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      }
    ]
  },
  externals: {
    react: "react"
  }
};

Our React Component ./src/index.js:

import React from 'react'

function Component() {
  return <div>Our package</div>
}

export default Component

Once you created all the files, you can build a bundle:

npm run build

Create a link to test it locally, before publishing:

npm link

And don't forget to use the instance of React from the environment you were going to test it:

npm link ../path/to/application/node_modules/react

Publish, once it works:

npm publish

Thanks for watching! Hope it helped you to develop your own not a lemon library 😊

Primitivo – the JS library for SVG.

Yurko Turskiy — Sun, 10 Nov 2019 03:53:54 +0000

I'm pleased to present the new Javascript library for SVG. It prepares data and doesn't manipulate the DOM. With it, you can create spinners, transition effects, or elements for illustrations.

GitHub repo: https://github.com/guandjoy/primitivo-svg

What makes it unique

Morph paths via animate tag;
Powerful timing and spacing controls;
Phased animation;
Animate with SSR and without JS (except for interactive cases).

Let's walk through examples 🌌

Sequence of Polygons

The first demo of how Primitivo generates shapes. Here we animate the numOfSegments parameter by changing the value from 2 to 44 with a 1.01 step increment.
The artistic idea taken from Matt DesLauriers' shot.

Smart Round

To create round shapes, Primitivo has the round parameter. With smartRound and adaptArms modes, you can get a circle from a non-equilateral polygon. This feature is fundamentally essential and allows us to make phased transitions.

Noise of Distance

The distance value stands for a position of a vertex between a center of a polygon and its boundaries.

The - and + buttons are responsible for the depth value, which is powering numOfSegments. Here is the formula on how it works:
numOfVertexes = numOfSegments * Math.pow(2, depth)

Phased Transition [interactive]

Inventing Phased Transition was a challenging goal. The Phases Layer generates key paths and seamlessly animates them in conjunction with the Spacing Layer. It allows us to create complex timing and spacing setups for a scene with many key paths. For example, if you want to seamlessly morph a triangle to a circle and then to a square using a single easing function, you can achieve that by using the Spacing Layer.

Blobby Spinner

Play with this component on CodeSandbox and generate your's unique effects. Also, if you'll use Server Side Rendering, the animation by itself could work while JS being off.

Thanks for watching!

Click the star button on the GitHub repo and ask your questions in the comments below 💘

Forem: Yurko Turskiy