react-use-ark
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.15 • Public • Published

    ark logo react-use-ark

    Build Status npm version TypeScript

    React hook to easily access ARK blockchain Ѧ API.

    Links

    ARK API documentation.

    ARK blockchain explorer official website.

    Official ARK client SDK for TypeScript.

    Demo

    Live demo & Code examples created with React DemoTab 📑

    Install

    • npm npm install react-use-ark
    • yarn yarn add react-use-ark

    Usage

    Simply import ARK hooks that you wish to fetch data in your React application.
    Each hook:

    • starts with a resource name as 'useTransactions...', 'useBlocks...', 'useDelegates...', 'useWallets...'.
    • always returns the same state object { response, isLoading, error } where response type is defined to easily access it's properties.
    • accepts fetchOnMount boolean argument, which can be used as an utility to cover common pattern of data fetching when component mounts.
    • accepts network argument which is an enumeration object 'DEVNET | MAINNET | TESTNET' or user defined string (localhost). Set it appropriately to your needs, depending on running relay.
    import React from 'react';
    import { useTransactionsLatest } from 'react-use-ark';
     
    const App = () => {
      // Get 20 latest transactions when App component mounts.
      const [{ response, isLoading, error }] = useTransactionsLatest(1, 20, true);
      return (
        <div>
          {isLoading && <div>Loading...</div>}
          {error && <div>Error fetching data: {error}</div>}
          {response && (
            <ul>
              {response.data.map(transaction => (
                <li key={transaction.id}>
                  <div>Amount: {transaction.amount}</div>
                  <div>Fee: {transaction.fee}</div>
                  <div>Sender: {transaction.sender}</div>
                  <div>Recipient: {transaction.recipient}</div>
                  <div>Block ID: {transaction.blockId}</div>
                  <div>Confirmations: {transaction.confirmations}</div>
                </li>
              ))}
            </ul>
          )}
        </div>
      );
    };
     
    ReactDOM.render(<App />, document.getElementById('root'));

    Development

    Easily set up a local development environment!

    Build all the examples and starts storybook server on localhost:9009:

    • clone
    • npm install
    • npm start

    OR

    Clone this repo on your machine, navigate to its location in the terminal and run:

    npm install
    npm link # link your local repo to your global packages 
    npm run build:watch # build the files and watch for changes 

    Clone project repo that you wish to test with react-use-ark library and run:

    npm install
    npm link react-use-ark # link your local copy into this project's node_modules 
    npm start

    Start coding! 🎉

    Contributing

    There are many endpoints to cover and hooks to be created, all contributions are welcome!

    Install

    npm i react-use-ark

    DownloadsWeekly Downloads

    0

    Version

    1.0.15

    License

    MIT

    Unpacked Size

    51.5 kB

    Total Files

    23

    Last publish

    Collaborators

    • marko424