Subnet Builder

A simple and reusable React component for calculating subnets, replicating the functionality of https://tidalcloud.com/subnet-builder.

Installation

To install this package, run:

npm install subnet-builder

Usage

First, import the SubnetBuilder component:

import SubnetBuilder from 'subnet-builder';

You can then use the SubnetBuilder component in your React application:

function App() {
  return (
    <div>
      <SubnetBuilder />
    </div>
  );
}

export default App;

Features

• Input for CIDR notation to dynamically generate subnet information.
• Display subnet details including the first host, last host, and broadcast address.
• Responsive event handling for interacting with subnet ranges (click, hover, leave).

Requirements

• React 16.8 or later

Build

This package uses Rollup as a module bundler. To build the package, ensure you have Rollup installed, then run:

npm run build

This executes the Rollup configuration defined in rollup.config.js to output a CommonJS and an ES Module bundle, both with sourcemaps.

Configuration

The Rollup configuration involves the following plugins:

• @rollup/plugin-node-resolve: Resolves third-party modules in node_modules.
• @rollup/plugin-commonjs: Converts CommonJS modules to ES6.
• @rollup/plugin-typescript: Provides TypeScript support.
• rollup-plugin-peer-deps-external: Automatically externalises peer dependencies.
• @rollup/plugin-terser: Minifies the bundle.

Ensure all peer dependencies are installed in your project:

npm install react react-dom @mui/material @mui/icons-material react-player react-draggable

Contributing

Contributions are welcome. Please submit a pull request or open an issue to discuss proposed changes or additions.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Keywords

react, react-component, subnet, network, cidr, subnet-builder, tidalcloud