PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

0.26.3

npm

@0xflair/react-ipfs

React components and hooks to work with IPFS. This library uses Flair's APIs to upload and pin the file to IPFS, but the file will not be stored on the backend.

Published25 Apr 2022
Direct dependencies42
Transitive dependenciesNot calculated

README

Current package documentation

Flair SDK: react-ipfs

React components and hooks to work with IPFS. This library uses Flair's APIs to upload and pin the file to IPFS, but the file will not be stored on the backend.

Getting Started

Installation

  1. Install the package:

    npm install @0xflair/react-ipfs

  2. Install peer dependencies:

    npm install axios

# if visual components needed:
npm install tailwindcss @headlessui/react @heroicons/react @tailwindcss/aspect-ratio

  3. Configure tailwind.config.js (Tailwind v3) to scan SDK for classes (if visual components needed):

    module.exports = {
  purge: [
    "./public/**/*.html",
    "./src/**/*.{js,jsx,ts,tsx,vue}",

    // This line tells Tailwind to look into SDK files
    "./node_modules/@0xflair/**/*.{js,jsx,ts,tsx,vue}",
  ],
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  plugins: [
    // These plugins are used in this package
    require("@tailwindcss/forms"),
    require("@tailwindcss/aspect-ratio"),
  ],
};

Usage

IPFS Uploader Hook

import { useIpfsFileUploader } from "@0xflair/react-ipfs";

function App() {
  const [userFile, serUserFile] = useState<File>();
  const [{
    data: ipfsUrl,
    error: ipfsError,
    loading: ipfsLoading
  }, ipfsUpload] = useIpfsFileUploader({
    autoUpload: true,
    fromFile: userFile,
  });

  return (
    <ul>
      <li>Choose file: <input type="file" value={userFile} onChange={setUserFile} /></li>
      <li>IPFS Loading: {ipfsLoading ? 'Yes...' : 'Idle'}</li>
      <li>IPFS Error: {ipfsError?.message || ipfsError?.toString()}</li>
    </ul>
  );

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 45

Native requirements
42 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
@0xflair/react-common
Environment
{
  "local_name": "@0xflair/react-common",
  "alias": false,
  "peer_metadata": null
}
^0.26.3development
@headlessui/react
Environment
{
  "local_name": "@headlessui/react",
  "alias": false,
  "peer_metadata": null
}
^1.5.0development
@heroicons/react
Environment
{
  "local_name": "@heroicons/react",
  "alias": false,
  "peer_metadata": null
}
^1.0.6development
@rollup/plugin-commonjs
Environment
{
  "local_name": "@rollup/plugin-commonjs",
  "alias": false,
  "peer_metadata": null
}
^21.0.2development
@rollup/plugin-node-resolve
Environment
{
  "local_name": "@rollup/plugin-node-resolve",
  "alias": false,
  "peer_metadata": null
}
^13.1.3development
@rollup/plugin-typescript
Environment
{
  "local_name": "@rollup/plugin-typescript",
  "alias": false,
  "peer_metadata": null
}
^8.3.1development
@storybook/addon-actions
Environment
{
  "local_name": "@storybook/addon-actions",
  "alias": false,
  "peer_metadata": null
}
^6.4.19development
@storybook/addon-contexts
Environment
{
  "local_name": "@storybook/addon-contexts",
  "alias": false,
  "peer_metadata": null
}
^5.3.21development
@storybook/addon-controls
Environment
{
  "local_name": "@storybook/addon-controls",
  "alias": false,
  "peer_metadata": null
}
^6.4.19development
@storybook/addon-essentials
Environment
{
  "local_name": "@storybook/addon-essentials",
  "alias": false,
  "peer_metadata": null
}
^6.4.19development
@storybook/addon-interactions
Environment
{
  "local_name": "@storybook/addon-interactions",
  "alias": false,
  "peer_metadata": null
}
^6.4.19development
@storybook/addon-links
Environment
{
  "local_name": "@storybook/addon-links",
  "alias": false,
  "peer_metadata": null
}
^6.4.19development
@storybook/builder-webpack5
Environment
{
  "local_name": "@storybook/builder-webpack5",
  "alias": false,
  "peer_metadata": null
}
^6.4.19development
@storybook/manager-webpack5
Environment
{
  "local_name": "@storybook/manager-webpack5",
  "alias": false,
  "peer_metadata": null
}
^6.4.19development
@storybook/node-logger
Environment
{
  "local_name": "@storybook/node-logger",
  "alias": false,
  "peer_metadata": null
}
^6.4.19development
@storybook/preset-create-react-app
Environment
{
  "local_name": "@storybook/preset-create-react-app",
  "alias": false,
  "peer_metadata": null
}
4.1.0development
@storybook/react
Environment
{
  "local_name": "@storybook/react",
  "alias": false,
  "peer_metadata": null
}
^6.4.19development
@storybook/testing-library
Environment
{
  "local_name": "@storybook/testing-library",
  "alias": false,
  "peer_metadata": null
}
^0.0.9development
@testing-library/jest-dom
Environment
{
  "local_name": "@testing-library/jest-dom",
  "alias": false,
  "peer_metadata": null
}
^5.16.2development
@testing-library/react
Environment
{
  "local_name": "@testing-library/react",
  "alias": false,
  "peer_metadata": null
}
^12.1.4development
@testing-library/user-event
Environment
{
  "local_name": "@testing-library/user-event",
  "alias": false,
  "peer_metadata": null
}
^13.5.0development
@types/axios
Environment
{
  "local_name": "@types/axios",
  "alias": false,
  "peer_metadata": null
}
^0.14.0development
@types/jest
Environment
{
  "local_name": "@types/jest",
  "alias": false,
  "peer_metadata": null
}
^27.4.1development
@types/node
Environment
{
  "local_name": "@types/node",
  "alias": false,
  "peer_metadata": null
}
^16.11.26development
@types/react
Environment
{
  "local_name": "@types/react",
  "alias": false,
  "peer_metadata": null
}
^17.0.41development
@types/react-dom
Environment
{
  "local_name": "@types/react-dom",
  "alias": false,
  "peer_metadata": null
}
^17.0.14development
axios
Environment
{
  "local_name": "axios",
  "alias": false,
  "peer_metadata": null
}
^0.26.1development
eslint-plugin-prettier
Environment
{
  "local_name": "eslint-plugin-prettier",
  "alias": false,
  "peer_metadata": null
}
^4.0.0development
eslint-plugin-react-hooks
Environment
{
  "local_name": "eslint-plugin-react-hooks",
  "alias": false,
  "peer_metadata": null
}
^4.4.0development
eslint-plugin-simple-import-sort
Environment
{
  "local_name": "eslint-plugin-simple-import-sort",
  "alias": false,
  "peer_metadata": null
}
^7.0.0development
postcss
Environment
{
  "local_name": "postcss",
  "alias": false,
  "peer_metadata": null
}
^8.4.12development
prettier
Environment
{
  "local_name": "prettier",
  "alias": false,
  "peer_metadata": null
}
^2.6.2development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^17.0.2development
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
^17.0.2development
react-scripts
Environment
{
  "local_name": "react-scripts",
  "alias": false,
  "peer_metadata": null
}
5.0.0development
rimraf
Environment
{
  "local_name": "rimraf",
  "alias": false,
  "peer_metadata": null
}
^3.0.2development
rollup
Environment
{
  "local_name": "rollup",
  "alias": false,
  "peer_metadata": null
}
^2.70.1development
rollup-plugin-dts
Environment
{
  "local_name": "rollup-plugin-dts",
  "alias": false,
  "peer_metadata": null
}
^4.2.0development
rollup-plugin-peer-deps-external
Environment
{
  "local_name": "rollup-plugin-peer-deps-external",
  "alias": false,
  "peer_metadata": null
}
^2.2.4development
rollup-plugin-postcss
Environment
{
  "local_name": "rollup-plugin-postcss",
  "alias": false,
  "peer_metadata": null
}
^4.0.2development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^4.6.2development
webpack
Environment
{
  "local_name": "webpack",
  "alias": false,
  "peer_metadata": null
}
^5.70.0development
@0xflair/react-common
Environment
{
  "local_name": "@0xflair/react-common",
  "alias": false,
  "peer_metadata": null
}
0.*peer
axios
Environment
{
  "local_name": "axios",
  "alias": false,
  "peer_metadata": null
}
^0.26.1peer
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^17.0.2peer

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-L/35CpwvjqDVg2+MiMCIyfgkX1QKO+Ja4VojBKe/otBJmnF6A5Ik+G7BCSpnCvyuELWlHs3DbuhdJ9IAdH4X4w==",
  "shasum": "ef0eb42b71b69e3bf3a73ec1cd88839835df742c",
  "tarball": "https://registry.npmjs.org/@0xflair/react-ipfs/-/react-ipfs-0.26.3.tgz",
  "fileCount": 8,
  "unpackedSize": 120629,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEUCIQDarxZtoU5bSeQLzD/PcGAlkhdxSFgrCbxTupUatgdcDQIgEzkLsDS1YiYV6aE3DD67/Sqlhbsxv2owVRG09gU7MTQ="
    }
  ],
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZoeHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomvg//SGiQIe2UxyT5cn9rX90fTdiqtxVLhtibARz/58TNXJ0842o3\r\nhiqC5+pHXrSXnKm8PmSqGl4FPk0alirxxQylUErWLcrhrI9BqUYoa6bLMDBx\r\nKF1MTZspyrOBzOLlf9Vrq6L0Qz/YUPE6joXWEM1FIuzxNtg0AJQhCYxb/7Vd\r\nG+a1LtnqKr/ERKChzPhyBU253AtprLI+7eXLOFZKWGcSc/q+T+K/sJvMrHGK\r\nXQ6a9tbONa9Ko6Y/fjrsjR+JA/urQJUcolGGlmLHDoRUWMinWAAj1tt+Kmxf\r\nMqAxLylmoR9ydmT+uofMmKHH4ZHu6fzkbRBMii/BBtVp2WeVGTZG0WTfMnRi\r\nseIhr3iUD/MIHFm4lHQXZwzZJDDt8nPJfYAUI1E6gM3lr7g32cOcibHUEkc3\r\nYuSKZ/jnIMJN+Ng95y8KH72l2yuUTwq1IUWahFA+a7roBXIXa9uqUO4kkljD\r\ndK/IKWnS+BHcufstm6QpttGPhD4rrlqY+mmZZrqzJhpfCDxHG+UMk1120wqt\r\nPSCAxXn8RVBeW8NpqxyoxRAA9YppN+Qz2ze4Tddb4m06A6wGEPz02kl4oDZC\r\npsPWEpuu7VxAes472xH3YLLkKXxCIyylnlJ7kz6RN4MGpJriqxuUJIS2KZfy\r\nSd9saiz3blR2tWxBGmVss4VOjU9ABNpGNko=\r\n=qZli\r\n-----END PGP SIGNATURE-----\r\n"
}

Repository

PENDING
0xflair/typescript-sdk

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 23:24 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:8097c6ad9662adfee072cf2ca575d56eca3636bbb19dd19c4fb7248a5d4e377a

Other collected versions

0.123.227 Nov0.123.112 Nov0.123.08 Nov0.122.228 Oct0.122.128 Oct0.122.028 OctView all collected versions →