Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@coveord/plasma-react
Advanced tools
Plasma React
Coveo Administration Console's design system.
Getting started
Prerequisites
This repository uses some external libraries defined as peer dependencies. You must install those libraries in you own project in order for @coveord/plasma-react to work properly. All peer dependencies are listed in the package.json file along with their respective version requirements.
Install
npm install @coveord/plasma-react
If you want to use @coveord/plasma-react in a TypeScript context, the package already includes its types.
Usage
In a .jsx context:
const React = require('react');
const createRoot = require('react-dom/client').createRoot;
const Badge = require('@coveord/plasma-react').Badge;
const root = createRoot(document.getElementById('SomewhereInYourApp'));
root.render(<Badge label="Hello Plasma!" />);
In a .tsx context:
import {createRoot} from 'react-dom/client';
import {Badge} from '@coveord/plasma-react';
const root = createRoot(document.getElementById('SomewhereInYourApp'));
root.render(<Badge label="Hello Plasma!" />);
Dropdowns
All components that implement a dropdown behaviour like the SingleSelect or the MultiSelect will render their content outside the normal DOM hierachy using react portals to avoid some overlapping issues.
The target of that portal is given by the Defaults.DROP_ROOT selector, but you can change this value to something else if you need.
Defaults.DROP_ROOT = '#plasma-dropdowns'; // default
If no DOM element match the specified selector an error will be thrown, so make sure this selector points to an element that always exists in the DOM. Preferably, that element should be outside the hierarchy of the whole app.
Example of a working DOM structure:
<html>
<head>
<!-- ... -->
</head>
<body className="coveo-styleguide">
<div id="App"><!-- Your app renders here --></div>
<div id="plasma-dropdowns"></div>
</body>
</html>
Contributing
See our main page.
License
@coveord/plasma-react is distributed under Apache 2.0 license.
53.1.3 (2024-04-29)
Bug Fixes
- plasma-react, multiselect: fix margin for selected options (#3704) 7b2bfd6, closes #3704
FAQs
Plasma components implemented with React!
We found that @coveord/plasma-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Package last updated on 29 Apr 2024
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025