npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

grandeur-js

v1.5.1

Published

Grandeur SDK from JavaScript. It can be utilized to integrate Grandeur features into web apps.

Downloads

66

Readme

Grandeur client for browsers. Check full docs at https://docs.grandeur.dev

NPM Downloads/week License

Here is how you can integrate Grandeur in your project.

React

Just simply download the package from npm and use it in your react project

npm install grandeur-js --save

This package exports two things 1) a react component - use it as parent component to entire app code and init the SDK 2) HOC - wrap the component in which you want to access the Grandeur object to make request to Grandeur.

It is shown in the sample code below

// index.js
// Import react and react dom
import React from "react";
import ReactDOM from "react-dom";

// Import app code
import App from "./app";

// and Import Grandeur Component
import {Grandeur} from "grandeur-js/react";

// Render app
const page = (
	<Grandeur apiKey="YOUR-APIKEY" secretKey="SECRET-KEY" credentials={credentials}>
		{/* Your app code*/}
		<App />
	</Grandeur>
);

// Finally render
ReactDOM.render(page, document.getElementById("root"));

Then inside your app.js

// app.js
// The App Component

// Libraries
import React, {Component} from "react";

// Import Grandeur HOC
import {withGrandeur} from "grandeur-js/react";

// Component
class App extends Component {
	// Constructor
	constructor(props) {
		super(props);

		// State of the Component
		this.state = {};
	}

	componentDidMount() {
		// Component is Mounted
		// get reference to the grandeur
		// through props. Which can be used to
		// access all the features of Grandeur
		var project = this.props.grandeur;
	}

	// Render
	render() {
		// Render the Component
		return <p>Hello World</p>;
	}
}

// Export the Component after wrapping in HOC
export default withGrandeur(App);

Browser

Just simply drop the link of JavaScript SDK in a script tag inside your web app using our CDN.

<!-- Drop the Link of CDN in your Web App -->
<script src="https://unpkg.com/grandeur-js"></script>

This will give you access to the global Grandeur object, through which you can initialize the SDK and get a reference to your project as shown below

// With global Grandeur object,
// you can simply initialize the SDK
// with your API key and get reference
// to your project
var project = grandeur.init("API-KEY", "SECRET-KEY");

Check full sdk references from documentation. Or check full examples.

Node.js

After downloading the package from npm, you can use it in your node project.

import grandeur from "grandeur-js";

This will give you access to the global Grandeur object, through which you can initialize the SDK and get a reference to your project as shown below

// The init the SDK with API key 
// and get reference to your project
var project = grandeur.init("API-KEY", "SECRET-KEY");

For User Authorization, generate a token from Grandeur Dahsboard and use as shown below.

var response = await project.auth().token("AUTH_TOKEN");