|
1 | 1 | # `m3ters.js`
|
2 |
| -React toolkit tailored to M3tering Protocol for handling ugly crypto strings |
3 | 2 |
|
4 |
| -## Features |
5 |
| -- **[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. |
| 3 | +Introducing m3ters.js, a React toolkit meticulously crafted to empower developers with seamless management of complex cryptographic strings within the M3tering Protocol. |
6 | 4 |
|
7 |
| -- **[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. |
| 5 | +This versatile library empowers developers with: |
8 | 6 |
|
9 |
| -## Installation |
| 7 | +- **Seamless Integration:** Effortlessly incorporate m3ters.js components and functions into your React projects, streamlining development and reducing complexity. |
10 | 8 |
|
11 |
| -1. Add the `m3ters.js` component to your project using npm: |
| 9 | +- **Protocol Adherence:** Interact with M3tering Protocol elements confidently, ensuring compliance with protocol-specific requirements and best practices. |
12 | 10 |
|
13 |
| - ```bash |
14 |
| - npm install m3ters --save |
15 |
| - ``` |
| 11 | +## Featured React Components |
| 12 | + |
| 13 | +### [M3ter Alias](./docs/m3ter-alias.md#m3ter-alias): Transform Unwieldy Identifiers |
| 14 | + |
| 15 | +Effortlessly convert those eye-straining crypto strings into captivating and user-friendly aliases, seamlessly integrated within your React applications. Representing IDs in a way you can actually remember. |
| 16 | + |
| 17 | +### [M3ter Head](./docs/m3ter-head.md#M3ter-Head): Unique SVG Avatars |
| 18 | + |
| 19 | +Generate unique and captivating SVG avatars that serve as visual representations for device DIDs and blockchain addresses, enhancing user engagement and brand recognition. |
| 20 | + |
| 21 | +## Installation Options |
| 22 | + |
| 23 | +m3ters.js offers flexible installation methods to cater to your preferred workflow: |
| 24 | + |
| 25 | +### 1. Using a Package Manager: |
| 26 | + |
| 27 | +Open your terminal or command prompt and navigate to your project's root directory. Then, execute the following command: |
| 28 | + |
| 29 | +- **npm:** `npm i --save m3ters` |
| 30 | +- **yarn:** `yarn add m3ters` |
| 31 | + |
| 32 | +If you prefer a package manager other than npm or yarn, you can also try: |
| 33 | + |
| 34 | +- **pnpm:** `pnpm install m3ters` |
| 35 | +- **Bower:** `bower install m3ters` |
| 36 | + |
| 37 | +### 2. CDN Link: |
| 38 | + |
| 39 | +- Include the following script tag in your HTML file: |
| 40 | + |
| 41 | +```html |
| 42 | +<script src="https://unpkg.com/m3ters@latest/dist/m3ters.min.js"></script> |
| 43 | +``` |
| 44 | + |
| 45 | +### 3. Direct Download: |
| 46 | + |
| 47 | +- Access the m3ters.js repository on GitHub: [here](https://github.com/iChristwin/m3ters.js/releases) |
| 48 | +- Download the latest `.zip` or `.tar.gz` file containing the library source code. |
| 49 | +- Extract the contents into your project's directory. |
| 50 | +- Import components directly from the extracted files. |
| 51 | + |
| 52 | +## Usage |
| 53 | + |
| 54 | +Added the React components from `m3ters.js` into code via named imports |
| 55 | + |
| 56 | +```javascript |
| 57 | +import { M3terAlias, M3terHead } from "m3ters"; |
| 58 | +``` |
| 59 | + |
| 60 | +See [M3ter Alias](./docs/m3ter-alias.md#m3ter-alias) and [M3ter Head](./docs/m3ter-head.md#M3ter-Head) for more usage documentation. |
| 61 | + |
| 62 | +## Compatibility |
| 63 | + |
| 64 | +The library was developed, tested and is guaranteed to function properly on |
| 65 | + |
| 66 | +- node `19.0.0` |
| 67 | +- npm: `9.8.1` |
| 68 | +- react: `18.2.0` |
| 69 | + |
| 70 | +Should also be compatible with all major desktop and mobile browsers including but not limited to |
| 71 | + |
| 72 | +- Firefox |
| 73 | +- Chrome |
| 74 | +- Edge |
| 75 | +- Brave |
| 76 | +- Waterfox |
16 | 77 |
|
17 | 78 | ## Example App
|
18 | 79 |
|
19 |
| -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. |
| 80 | +Check out the my example GitHub repo, [ichristwin/demo-m3ters](https://github.com/ichristwin/demo-m3ters). You could also experience the live implementation of at https://m3ters.ichristwin.com |
20 | 81 |
|
21 | 82 | ### Other projects using `m3ters.js`
|
22 |
| - - |
| 83 | + |
| 84 | +- |
| 85 | + |
| 86 | +## Contributing |
| 87 | + |
| 88 | +See the [contributing docs](./CONTRIBUTING.MD) for more information on how to contribute code. |
| 89 | + |
| 90 | +## Licensing |
| 91 | + |
| 92 | +You are free to embed under the terms of the [CC0 1.0 Universal](./LICENSE) License. |
0 commit comments