@arcblock/ux

Common used react components for arcblock products

Usage no npm install needed!

<script type="module">
  import arcblockUx from 'https://cdn.skypack.dev/@arcblock/ux';
</script>

README

@arcblock/ux

Core UX components shared across arcblock products

Usage

yarn add @arcblock/ux

Then:

import Alert from '@arcblock/ux/lib/Alert';
import ClickToCopy from '@arcblock/ux/lib/ClickToCopy';
import Icon from '@arcblock/ux/lib/Icon';
import ActivityIndicator from '@arcblock/ux/lib/ActivityIndicator';

FAQ

How to use GraphQLPlayground comonent in SSR env such as gatsby?

Because graphiql and graphiql-code-exporter uses browser globals such as window, we need to mock them both during building time for gatsby.

First we need to create an mock for graphqil, src/mocks/graphiql:

function graphiql() {
  return null;
}

graphiql.Logo = () => null;
graphiql.Toolbar = () => null;
graphiql.QueryEditor = () => null;
graphiql.VariableEditor = () => null;
graphiql.ResultViewer = () => null;
graphiql.Button = () => null;
graphiql.ToolbarButton = () => null;
graphiql.Group = () => null;
graphiql.Menu = () => null;
graphiql.MenuItem = () => null;
graphiql.Select = () => null;
graphiql.SelectOption = () => null;
graphiql.Footer = () => null;

module.exports = graphiql;

Then, in gatsby-node.js, use the mocks:

const path = require('path');

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          graphiql: path.resolve(__dirname, './src/mocks/graphiql.js'),
        },
      },
      module: {
        rules: [
          {
            test: /node_modules\/codemirror\//,
            use: loaders.null(),
          },
        ],
      },
    });
  }
};