0.0.5 • Published 5 months ago
client-inspector v0.0.5
Client Inspector
Client Inspector is a lightweight TypeScript library that helps fetch and analyze client-side information such as browser details, operating system, and device specifications. It works seamlessly with React, Angular, Vue, and plain JavaScript/HTML environments.
🚀 Installation
Install client-inspector using npm or yarn:
npm install client-inspectoryarn add client-inspector📌 Usage
📥 Importing
import clientInspector, { ClientInspector } from "client-inspector";clientInspectoris the default export and returns a promise resolving to client details.ClientInspectoris the TypeScript type for the response.
⚛️ Example Usage in React (TypeScript)
import { useEffect, useState } from 'react';
import clientInspector, { ClientInspector } from "client-inspector";
function App() {
const [data, setData] = useState<ClientInspector | null>(null);
useEffect(() => {
(async () => {
setData(await clientInspector());
})();
}, []);
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
export default App;🌐 Usage in JavaScript (HTML)
<script type="module">
import clientInspector from "https://cdn.jsdelivr.net/npm/client-inspector/dist/index.js";
(async () => {
const clientData = await clientInspector();
console.log(clientData);
})();
</script>🖼️ Example Usage in Vue
<script setup>
import { ref, onMounted } from 'vue';
import clientInspector from "client-inspector";
const clientData = ref(null);
onMounted(async () => {
clientData.value = await clientInspector();
});
</script>
<template>
<pre>{{ clientData }}</pre>
</template>🅰️ Example Usage in AngularJS
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script type="module">
import clientInspector from "https://cdn.jsdelivr.net/npm/client-inspector/dist/index.js";
angular.module("myApp", []).controller("MainCtrl", function($scope) {
clientInspector().then(data => {
$scope.clientData = data;
$scope.$apply();
});
});
</script>
</head>
<body ng-controller="MainCtrl">
<pre>{{ clientData | json }}</pre>
</body>
</html>🤝 Contribution
Contributions are welcome! If you'd like to improve Client Inspector, please follow these steps:
- Fork the repository on GitHub.
- Create a new branch for your feature or bug fix.
- Commit your changes and push them to your fork.
- Open a pull request detailing your changes.
For any questions or discussions, feel free to open an issue.
📂 Repository
📜 License
This project is licensed under the MIT License. See the LICENSE file for more details.