@ongov/ontario-design-system-component-library-react
Advanced tools
React specific wrapper for ontario-design-system-component-library
Readme
This library was generated using Stencil's React output target dependency. It is based off the Ontario Design System Component Library built using Stencil. For more information, find it on NPM.
To find documentation on individual web components in this component library, please download and refer to our component documentation.
To use the Ontario Design System React component library, follow these steps:
Install the NPM package.
npm install --save @ongov/ontario-design-system-component-library-react
Import the desired components from the component library.
import { OntarioButton } from '@ongov/ontario-design-system-component-library-react';
import { OntarioBlockquote } from '@ongov/ontario-design-system-component-library-react';
You can now use the React components in your component and template files.
<OntarioButton type="primary">Click me!</OntarioButton>
<OntarioBlockquote
attribution="Survey respondent"
quote="Access to high-quality child care is an issue that impacts our entire society."
></OntarioBlockquote>
Along with the components, the local assets (logos, fonts, etc.) need to be copied into your project so that they are available for bundling upon building your React application.
The assets in the NPM package are located at @ongov/ontario-design-system-component-library-react/dist/assets, and should be copied to your public assets folder.
In a standard React application this can be done in a number of ways. One way is to use the copyfiles NPM package, which you can with any operating system:
copyfiles -E -f "node_modules/@ongov/ontario-design-system-component-library-react/dist/assets/*" src/assets
Another way is to add scripts to copy the assets in your package.json file. For example:
"prebuild": "npm run copy:assets",
"copy:images": "copyfiles -E -f \"node_modules/@ongov/ontario-design-system-component-library-react/dist/component-library/assets/images/**\" src/assets",
"copy:favicons": "copyfiles -E -f \"node_modules/@ongov/ontario-design-system-component-library-react/dist/component-library/assets/favicons/**\" src/assets/favicons",
"copy:fonts": "copyfiles -E -u 6 \"node_modules/@ongov/ontario-design-system-component-library-react/dist/component-library/assets/fonts/**/*\" src/assets/fonts",
"copy:assets": "npm run copy:images && npm run copy:favicons && npm run copy:fonts"
Contact us at design.system@ontario.ca for assistance with this package.
FAQs
React specific wrapper for ontario-design-system-component-library
We found that @ongov/ontario-design-system-component-library-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
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.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.