React + RONIN

This package allows for interacting with RONIN in React apps with ease.

Setup

First, install the package with a package manager of your choice:

# Bun
bun add react-ronin

# npm
npm install react-ronin

Next, create a new app token on the RONIN dashboard (under "Apps" in the sidebar), and add it as a environment variable named RONIN_TOKEN to your project.

Afterward, you can start invoking RONIN from anywhere in your code:

import { get, Image, RichText } from 'react-ronin';

export default async function Post() {
  const post = await get.post.with.slug('intro');

  return (
    <div>
      <Image src={post.image} />
      <RichText data={post.content} />
    </div>
  );
};

That's it! 🎉

You can now start inserting records with the RONIN query syntax, or add them on the RONIN dashboard. Everything you can do with the RONIN client, you can also do on the dashboard (creating records, retrieving them, filtering them, updating them, etc).

Contributing

We would be excited to welcome your suggestions for the RONIN React client!

To start contributing code, first make sure you have Bun installed, which is a JavaScript runtime.

Next, clone the repo and install its dependencies:

bun install

Once that's done, link the package to make it available to all of your local projects:

bun link

Inside your project, you can then run the following command, which is similar to bun add react-ronin or npm install react-ronin, except that it doesn't install react-ronin from npm, but instead uses your local clone of the package:

bun link react-ronin

If your project is not yet compatible with Bun, feel free to replace all of the occurances of the word bun in the commands above with npm instead.

You will just need to make sure that, once you create a pull request on the current repo, it will not contain a package-lock.json file, which is usually generated by npm. Instead, we're using the bun.lockb file for this purpose (locking sub dependencies to a certain version).

Developing

In order to be compatible with a wide range of projects, the source code of the react-ronin repo needs to be compiled (transpiled) whenever you make changes to it. To automate this, you can keep this command running in your terminal:

bun run dev

Whenever you make a change to the source code, it will then automatically be transpiled again.

Running Tests

The RONIN React client has 100% test coverage, which means that every single line of code is tested automatically, to ensure that any change to the source code doesn't cause a regression.

Before you create a pull request on the react-ronin repo, it is therefore advised to run those tests in order to ensure everything works as expected:

# Run all tests
bun test

# Alternatively, run a single test
bun test -t 'your test name'