Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pensil-inc/pensil-web-sdk
SDK for pensil Web
https://github.com/pensil-inc/pensil-web-sdk
Last synced: about 1 month ago
JSON representation
SDK for pensil Web
- Host: GitHub
- URL: https://github.com/pensil-inc/pensil-web-sdk
- Owner: pensil-inc
- Created: 2022-03-22T02:25:26.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-01T06:45:56.000Z (over 2 years ago)
- Last Synced: 2024-10-30T01:36:52.351Z (about 2 months ago)
- Language: TypeScript
- Size: 1.31 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
Awesome Lists containing this project
README
# 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
```
or
```
yarn add @pensil-inc/web-sdk@latest
```
## Using the web-sdk in a React App
### 1. Import and initialise the `PensilService`
```javascript
import { PensilService } from "@pensil-inc/web-sdk";
const configuration = {
token: "",
baseUrl: "",
};
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 [email protected] for more.
- `base_url` - the base url to apis, contact [email protected] for more
### 2. Add the pensil stylesheets
```javascript
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
```javascript
import { UIKit } from "@pensil-inc/web-sdk";
...
return (
);
...
```
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` -
```javascript
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: "",
baseUrl: "",
});
return (
);
}
export default App;
```
Please contact [email protected] to get more details on the
variables used.
## Authors
- [Shubham Singh Chahar](https://www.github.com/thefallenmerc)
- [Sonu Sharma](https://github.com/TheAlphamerc)
## Support
For support, email [email protected] or join our Slack channel.
[Pensil](https://pensil.in)