added M3terAlias component

Author: iChristwin

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.md

@@ -1,15 +1,22 @@
-# m3ters.js
+# `m3ters.js`
 React toolkit tailored to M3tering Protocol for handling ugly crypto strings
 
 ## Features
-- **Human-Readable Hashes:** Easily convert complex cryptographic strings into easily understandable and visually appealing human-readable hashes.
+- **[M3ter Alias](./docs/m3ter-alias.md#m3ter-alias): Human-Readable Hashes:** Easily convert complex cryptographic strings into easily understandable and visually appealing human-readable hashes.
 
 - **[M3ter Head](./docs/m3ter-head.md#M3ter-Head): Unique SVG Avatars** Generate one-of-a-kind SVG avatars that serve as distinctive visual representations for device DIDs and blockchain address strings commonly encountered in the M3tering Protocol.
 
 ## Installation
 
-1. Add the `m3ter-head` component to your project using npm:
+1. Add the `m3ters.js` component to your project using npm:
 
    ```bash
    npm install m3ters --save
    ```
+
+## Example App
+
+Check out my [demo m3ters](https://github.com/ichristwin/demo-m3ters) for a sample React project incorporating the `m3ters.js` library. Additionally, you can experience the live implementation of `m3ters.js` at https://m3ters.ichristwin.com.
+
+### Other projects using `m3ters.js`
+ - 

docs/m3ter-alias.md

@@ -0,0 +1,36 @@
+# M3ter Alias
+
+Effortlessly create captivating names that instantly distinguish each device, and introduce a touch of personality.
+
+### Usage:
+
+1. Import the `M3terAlias` component into your React code:
+
+   ```javascript
+   import * as React from "react";
+   import { M3terAlias } from "m3ters";
+   ```
+
+2. Render the alias within your component, providing a unique seed string for generation:
+
+   ```jsx
+   export default function Home() {
+     return (
+       <h2 style={{ "text-transform": "capitalize" }}>
+         <M3terAlias seed={"device_DID_string"} />
+       </h2>
+     );
+   }
+   ```
+
+3. Your browser should render text content like shown below
+<h2><p align="center">Mighty Distinct Nanogear</p></h2>
+
+## Credits
+
+Inspired by a similar JavaScript library, [angry-purple-tiger](https://github.com/helium/angry-purple-tiger) developed by [Andrew Allen](https://twitter.com/allenan_) for the Helium Network.
+
+
+## Licensing
+
+You are free to embed under the terms of the [CC0 1.0 Universal](./LICENSE) License.

package.json

@@ -42,8 +42,8 @@
   },
   "type": "module",
   "source": "src/index.js",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ]

rollup.config.js

@@ -9,13 +9,17 @@ export default [
     external: [/@babel\/core/, /@babel\/preset-react/, /react/, /react-dom/],
     output: [
       {
-        file: "dist/index.cjs",
+        dir: "dist/cjs/",
         format: "cjs",
+        sourcemap: true,
+        entryFileNames: "[name].cjs",
       },
       {
-        file: "dist/index.js",
-        format: "es",
+        dir: "dist/esm/",
+        format: "esm",
         exports: "named",
+        sourcemap: true,
+        entryFileNames: "[name].js",
       },
     ],
     plugins: [

src/components/M3terAlias.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import seedrandom from "seedrandom";
+
+import { Adjectives, Nouns } from "../words";
+
+export const M3terAlias = (seed) => {
+  const random = seedrandom(seed);
+  let adj1 = Math.round(random() * 1808);
+  let adj2 = Math.round(random() * 1808);
+  let noun = Math.round(random() * 96);
+
+  return (
+    <>
+      {Adjectives[adj1]} {Adjectives[adj2]} {Nouns[noun]}
+    </>
+  );
+};

src/components/M3terHead.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import seedrandom from "seedrandom";
+
 import { Eyes } from "./Eyes";
 import { Mouth } from "./Mouth";
 import { Texture } from "./Texture";
 
-import seedrandom from "seedrandom";
-
 export const M3terHead = (seed) => {
   const random = seedrandom(seed);
   let eyes = Math.round(random() * 15);

src/components/index.js

@@ -1,3 +1,4 @@
 import React from 'react';
 
+export * from "./M3terAlias.jsx";
 export * from "./M3terHead.jsx";

src/index.js

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 
 export * from "./components";

src/parts/Eyes/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 export { Arturito } from "./Arturito";
 export { Bulging } from "./Bulging";