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

rive-constel

v0.2.0

Published

Rive Animation Component for Qwik

Downloads

9

Vulnerabilities

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

Links

Git

Maintainers

aleksandarp-constelaleksandarp-constel

Keywords

riveanimationqwikadvanced

Readme

A Qwik runtime library for Rive.

This library is a wrapper around the JS/Wasm runtime, giving full control over the js runtime while providing components and hooks for React applications.

Installation

Install through npm:

npm install --save qwik-rive

Usage

import { component$, useStore } from '@builder.io/qwik';
import { QwikRive } from 'qwik-rive';
import { Options } from 'qwik-rive/lib-types/types';

export default component$(() => {
  const store = useStore<Options>({
      src: 'https://cdn.rive.app/animations/vehicles.riv',
  });
  return (
    <>
      <div>
        <QwikRive options={store}></QwikRive>
      </div>
    </>
  );
});

Demo

Rive Overview

Rive is a real-time interactive design and animation tool that helps teams create and run interactive animations anywhere. Designers and developers use our collaborative editor to create motion graphics that respond to different states and user inputs. Our lightweight open-source runtime libraries allow them to load their animations into apps, games, and websites.

:house_with_garden: Homepage

:blue_book: General help docs

🛠 Resources for building in Rive

Getting Started

Follow along with the link below for a quick start in getting Rive Qwik integrated into your Qwik apps.

Getting Started with Rive in Qwik

API documentation

Supported Versions

This library supports Qwik versions ^0.11.1.

Examples

Check out our Storybook instance that shows how to use the library in small examples, along with code snippets! This includes examples using the basic component, as well as the convenient hooks exported to take advantage of state machines.

Migration Guides

Using an older version of the runtime and need to learn how to upgrade to the latest version? Check out the migration guides below in our help center that help guide you through version bumps; breaking changes and all!

Migration guides

Contributing

We love contributions! Check out our contributing docs to get more details into how to run this project, the examples, and more all locally.

Issues

Have an issue with using the runtime, or want to suggest a feature/API to help make your development life better? Log an issue in our issues tab! You can also browse older issues and discussion threads there to see solutions that may have worked for common problems.