@pensil-inc/web-sdk NPM

Pensil Web SDK

The pensil web sdk can be used to leverage the functionalities of Pensil Social Platform. It include the PensilService and React UiKit both.

Installing Pensil Web SDK

Run the following command in your project

 npm i @pensil-inc/web-sdk@latest

 yarn add @pensil-inc/web-sdk@latest

Using the web-sdk in a React App

1. Import and initialise the `PensilService`

import { PensilService } from "@pensil-inc/web-sdk";
  const configuration = {
    token: "<user_token>",
    baseUrl: "<base_url>",
  };
  const pensil_service_instance = new PensilService(configuration);

In this step we are creating pensil_service_instance, which is consumable by the UIKit.

`configuration` object

The configuration object will receive the following properties -

user_token - user auth token, contact admin@pensil.com for more.
base_url - the base url to apis, contact admin@pensil.com for more

2. Add the pensil stylesheets

import "@pensil-inc/web-sdk/lib/esm/styles/index.css";

Pensil styles are scoped to the sdk components, so no need to worry about messing us your UI.

3. Import any UiKit element and use it

import { UIKit } from "@pensil-inc/web-sdk";
...
  return (
    <div className="">
      <UIKit.SectionDetail service={pensil_service_instance} groupId="<group_id>" sectionId="<section_id>" />
    </div>
  );  
...

Each UIKit item has its own input requirement, which you can refer to the documentation to get more insights on. Every UIkit item will have one thing in common and that is the pensil_service_instance, it is required to pass on the configurations and the authorization details to the child components.

We have created pensil_service_instance in Step 1

Demo

Simplest implementation for the SDK in new create-react-app -

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { UIKit, PensilService } from "@pensil-inc/web-sdk";
import "@pensil-inc/web-sdk/lib/esm/styles/index.css";

function App() {

  const pensilServiceInstance = new PensilService({
    token: "<user_token>",
    baseUrl: "<base_url>",
  });

  return (
    <div className="">
      <UIKit.SectionDetail
        service={pensilServiceInstance}
        groupId="<group_id>"
        sectionId="<section_id>" />
    </div>
  );
}

export default App;

Please contact admin@pensil.in to get more details on the variables used.