Socket
Socket
Sign inDemoInstall

basicprimitivesreact

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

basicprimitivesreact - npm Package Compare versions

Comparing version 5.4.6 to 5.4.7

47

package.json
{
"name": "basicprimitivesreact",
"version": "5.4.6",
"version": "5.4.7",
"main": "dist/index.js",

@@ -48,3 +48,3 @@ "module": "dist/index.js",

"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"deploy": "gh-pages -d build --src '*/' --repo https://github.com/BasicPrimitives/react",
"deploy": "gh-pages -d build --src '*/**' --repo https://github.com/BasicPrimitives/react",
"publish:npm": "SET NODE_ENV=production && if exist dist rmdir /s /q dist && mkdir dist && npx babel src/Diagrams/ --out-dir dist --copy-files"

@@ -66,3 +66,44 @@ },

]
}
},
"keywords": [
"data analytics",
"data visualization",
"visualization",
"diagrams",
"diagram layout",
"chart",
"charting library",
"diagram",
"diagrams visualization",
"diagram editor",
"diagram generator",
"tree",
"hierarchy",
"organizational chart",
"multiple inheritance visualization",
"family tree",
"dependency diagram",
"dependencies diagram",
"PERT",
"financial ownership diagram",
"DAG",
"directed acyclic graph",
"ui",
"input",
"multiselect",
"treeview",
"treeselect",
"control",
"widget",
"component",
"react",
"javascript",
"component library",
"react component",
"javascript control",
"PDF",
"PDFKit",
"pdfkit plugin",
"pdf generation"
]
}

@@ -24,2 +24,72 @@ # [Basic Primitives](https://www.basicprimitives.com) Diagrams for React

### Example
```
npx create-react-app test1
cd test1
yarn add basicprimitivesreact
yarn start
```
Add following changes into App.js
``` JavaScript
import React from 'react';
import './App.css';
import { OrgDiagram } from 'basicprimitivesreact';
import primitives from 'basicprimitives';
var photos = {
a: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAIAAACrV36WAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGnSURBVGhD7dnBbQJBDAVQk1o2QjlQwKYGzpSwKQfq4IxICRTB9jLZHCJFwWv7/7EiDt6zmX2yPYMHNq01eb7n5flI36JiIXWpbFW2kAwgsdVblS0kA0hs9db/ZWs+vW/Wno9PxPE3dhls6Od+HI1XT1d64Sb8R5utEulwdbA8VY+LZ/kqkfF456pBHxDz5Xxze/p2vsxukBbAshTVOE0PO4B2cUlWKrgUTKsrV0eut3RVU/cm5aKKqPXVbjuIDPtDUh2JImq1+jmjkupIFNFStXadHncWXkecpb3393me4oJZnionXyjLV6W4QFZEleHCWNG+0eKggQJiRVV6vhAXwoqrul0AC1H1uuIsTLUyukYH1jBL7WJ8lgq6oqwkVXSQDrLSVEFXjJWoirlCrFRVyBVhJasirgCr65tEv7a5A5jL0tcN7vNl9OVcHqtXRbocVr+Kc9k3H/3qPL69Ise7dh0SsS+2JmtFddgvdy/gGbY7Jdp2GRcyrlu1BfUjxtiPRm/lqVbGHOMHnU39zQm0I/UbBLA+GVosJHGVrcoWkgEktnoLydYXkF/LiXG21MwAAAAASUVORK5CYII=',
b: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAIAAACrV36WAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHFSURBVGhD7dk/bsIwFAZwp2dJOqCeIJwAunTqEcIYDsDYrUsYm61rJ5YmJyAnqDo03CW1XSIh4vi9l+o90eKsWOLnz3/4IqKu69TlPTeXRzKiwKKsS0grpEVJgDI27K2QFiUBytg/u7cO23n0i2dVU1Lqx7KnVS7tnIg6dtZx/kZHoEmxjE7TsDJJlpXhYMIsDXvaHuBDMJGVFq1u296nLVLn1zdv77BrIguer4rzfeekYVx8LCOP802GmMFwCC9LqWTmXkoAy81yff3dbQxFyM1qP5tzQjpLIBXzC1m9WpYD1eM9GBYfy/7CO1DFaw6rlIKuH/chB1fBPQBx3f14uPfWCU+b9qikxF72bUpokxirWSe00iW4iLbZIKuNKAtfuiayMEdqrELo0OZQuZnIwlwQpkKMXC/N+tn/5sHIsnRtq1wlotx5XdwsLVs8uFwfX74yKMDCLPj5mOtl1btBiwADZE/L1W20KvXXG07WSLexUUENVbTY9IsH3sacaY3uoGwDFRx5lk7qZQHteWlWVqFqlyDLbig4KBukBCur7LlCxXRc3Sj8nwjt85PPJRaRwOmHBhYltJBWSIuSAGVs2Fv/IK1vKZY5XO2KxFcAAAAASUVORK5CYII=',
c: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAIAAACrV36WAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHJSURBVGhD7ZnNccIwEIVxagEODBWYfkg70EbuIR1QAcMBuxfFjklixpLeeyuS8WF1ZaX99q1+dk0VQljMb7zMD6knciwlL66Wq6UooNj63nK1FAUU2/K99fFaxcfu2Cokj7bdU20azaFmne5PsoeFPCOE054FGtlpbCqWCelOVx8aVgQJq4RpQGPJeKxypoGMyiaLlYWaesqZM4pxWEkvWRfJw4rBGKzU8kw64gFBLgLLuPL3oYtOR1wYK07FKHUHi4oNuCCWKdjH62nExUaDsCyhsndmxg481e3723n60mzXS8Pzo0wBWM01QlVvVooLi62lsPl7sUBX3d4ulljL51jUKvcKV3AsKNHIIK/Wcr1VFnuerSWJl1tB78ChA6zVJtJInK8Nt7jdCmDFs6jK1R53VaX1Z+gBe+5TzdbN6KkOiRqQLQW6qC31GsSyLfubg0RYpfVWMlyqh7HW24RaIZVI1Pel2x+4BSisHFi09ct/oIBQ3T8Y6CT+/D7L9rWnEz7SJC9SQqneFa/WIFuRZiSTAcuMxiNZ1LJsNY3oy4OaxMkJSW841DnnDlvVo81vWOqtf4jCsRSRXS1XS1FAsfW95WopCii2n0mWgWSKWlxrAAAAAElFTkSuQmCC'
};
function App() {
const config = {
pageFitMode: primitives.common.PageFitMode.AutoSize,
autoSizeMinimum: { width: 100, height: 100 },
cursorItem: 0,
highlightItem: 0,
hasSelectorCheckbox: primitives.common.Enabled.True,
items: [
{
id: 0,
parent: null,
title: 'Scott Aasrud',
description: 'VP, Public Sector',
image: photos.a
},
{
id: 1,
parent: 0,
title: 'Ted Lucas',
description: 'VP, Human Resources',
image: photos.b
},
{
id: 2,
parent: 0,
title: 'Fritz Stuger',
description: 'Business Solutions, US',
image: photos.c
}
]
};
return (
<div className="App">
<OrgDiagram centerOnCursor={true} config={config} />
</div>
);
}
export default App;
```
See more examples in GIT repository.
## Free for Non-commercial

@@ -26,0 +96,0 @@ * Do you want to use Basic Primitives Diagrams for a personal website, a school site or a non-profit organization? Then you don't need the author's permission, just go on and use Basic Primitives Diagrams. For commercial websites and projects, see [License and Pricing](https://www.basicprimitives.com/index.php?option=com_content&view=article&id=14&Itemid=18&lang=en).

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc