npm install                          \
	@bity/api                          \
  @bity/data-stores                  \
  @bity/preact-conversion-components \
  @bity/styles                       \
  preact                             \
  preact-redux

Usage by example

It's somewhat convoluted to use these components because they try to do everything for you once provided with the correct information. They will periodically poll when there are listeners, and won't when there aren't any - small conveniences like that.

import { h, render } from 'preact';
import { Provider } from 'preact-redux';
import { BityApiClient } from '@bity/api';
import { Order } from '@bity/api/models';
import * as currenciesDataStore from '@bity/data-stores/currencies';
import * as orderDataStore from '@bity/data-stores/order';
import { getStore, initializeStores } from '@bity/data-stores/store';
import { ExchangeRate } from '@bity/preact-conversion-components/exchange-rate

// Initialize the API
const bityApiClient = new BityApiClient({
	exchangeApiUrl,
	legacyV2ApiUrl,
	clientId // Request a clientId from Bity's support.
});

// Initialize the state container with an API client instance
initializeStores({ bityApiClient });

// Get the store to get its dispatcher
const store = dataStore.getStore();
const { dispatch } = store;

// Get currencies information
currenciesDataStore.addDataListener(dispatch);

// To make a single initial request for exchange data
orderDataStore.removeDataListener(dispatch);
dispatch({ type: orderDataStore.DATA_UPDATE, payload: new Order() });
orderDataStore.addDataListener(dispatch);

render(
  <Provider store={store}>
    <ExchangeRate />
  <Provider/>,
  document.getElementById('root')
);

Save the file and run your favorite bundler/transpiler combination, and then:

<head>
  <!-- First include the default styling for the components. -->
  <link rel="stylesheet" type="text/css" href="node_modules/@bity/styles/index.css"/>
</head>

<body>
  <!-- Define a mount point: -->
  <div id="root"></div>

  <!-- Then include the bundle use. -->
  <script src="bundle.js"></script>
</body>

You should see some updating exchange rate on the screen.

FAQs

What is @bity/preact-conversion-components?

Is @bity/preact-conversion-components popular?

Is @bity/preact-conversion-components well maintained?

Package last updated on 08 Nov 2022

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.

Install

@bity/preact-conversion-components

@bity/preact-conversion-components

Installation

Usage by example

Related posts

Malicious “express-dompurify” npm Package Steals Browser and Cryptocurrency Wallet Data

ENISA 2024 Threat Landscape Report Warns of Increasing State-Sponsored Supply Chain Attacks on Open Source Software