npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nova-design-system/nova-react

v3.0.0-beta.27

Published

Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.

Downloads

487

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

aa0006aa0006nova-design-adminnova-design-adminevandenberghevandenberghkatselekatselewimvdsnovawimvdsnova

Keywords

Readme

Nova Components React

Nova Components React is a lightweight wrapper for React that allows you to use the native UI elements from the Nova UI package seamlessly within your React applications.

Installation

To get started, install the necessary packages using your package manager of choice:

npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-react

or

yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-react

Yarn Peer Dependency

If you’re using Yarn, note that it does not automatically install peer dependencies. You will need to install the following peer dependency manually:

yarn add @stencil/react-output-target

Setup

After installing the packages, you'll need to include the Nova UI CSS and define the custom elements in your main.tsx or index.tsx file:

import '@nova-design-system/nova-base/dist/css/nova-utils.css';
import '@nova-design-system/nova-base/assets/nova-fonts.css';
import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';

defineCustomElements();

This setup ensures that all the necessary Nova web-components are available in your application.

Nova Font Pro Integration

To use Nova fonts in your React application, you'll need to contact the Nova team via Teams, email, or check the Nova Wiki to obtain the full CDN URL. Once you have the URL, you can integrate it using any of these methods:

Option 1: Import in Global CSS (Recommended)

In your main CSS file (e.g., src/index.css or src/App.css):

@import url('https://novaassets.azureedge.net/fonts/nova-fonts-pro.css');

Option 2: HTML Integration

In your public/index.html:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://novaassets.azureedge.net/fonts/nova-fonts-pro.css">
</head>
<body>
  <div id="root"></div>
</body>
</html>

The nova-fonts-pro.css file includes both font definitions and the font-family rule for the body, automatically applying the fonts across your React application.

Usage

With everything set up, you can start using Nova components in your React application. Here's a quick example:

import { NvButton } from '@nova-design-system/nova-react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <NvButton danger onClick={() => setCount(count + 1)}>
      count is {count}
    </NvButton>
  );
};

In this example, the NvButton component is imported and used just like any other React component. The danger prop and onClick handler are passed to customize its behavior.

Conclusion

Nova Components React provides an easy way to integrate Nova's native web components into your React projects, enabling you to leverage the power of Nova UI with the flexibility of React. For more detailed documentation and examples, refer to the official Nova documentation.