Cannot use React Package react-use-cart

[ALWISHARIFF]

I wired up a simple boilerplate code intergrating both redux and react-use-cart page/index.js

import React, { useEffect, useState } from "react";
import { render, View, Text, Button } from "@goji/core";
import styles from "./index.css";
import { CartProvider, useCart } from "react-use-cart";
import { Provider } from "react-redux";
import store from "../../store";

const Page = () => {
  const [count, setCount] = useState(0);
  const { setItems } = useCart();
  // useEffect(() => {}, []);
  return (
    <View className={styles.goji}>
      <Text className={styles.goji}>{count}</Text>
      <Button onTap={() => setCount(count + 1)}>Tap ME</Button>
    </View>
  );
};
const CartWrappedApp = () => (
  <CartProvider >
    <Page />
  </CartProvider>
);
const ReduxCartWrappedApp = () => (
  <Provider store={store}>
    <CartWrappedApp />
  </Provider>
);
render(<ReduxCartWrappedApp />);

Unfortunately react-use-cart uses local storage to store its data ,The documentation states that you can pass a storage prop that takes a setter and a getter ,Goji.js doesnt support browser api's such us localstorage I get an error in the dist folder that says

TypeError: Cannot read property 'localStorage' of undefined

I tried using the npm package https://www.npmjs.com/package/local-storage I tried polyfilling it failed since you have no place to add a custom webpack configuration stated in the documentation.

Last option the package: https://github.com/notrab/react-use-cart takes a props storage which is a function of a getter and setter could you advise me what to use in this position Regards

[malash]

GojiJS is a React-based framework for mini program and doesn't support web environment. The react-use-cart is designed for web and depends on react-dom, so you cannot use it in a GojiJS project.

[ALWISHARIFF]

I tried using axios to make requests from goji.js but unfortunately it doesn't work and gives me a type error that Blob is not defined.I tried adding polyfill of the Blob class it failed I also tried node-fetch but a similar error was found of cannot set property 'headers' of undefined Any idea what works well in goji.js for making requests or do you have any project demo that involves http requests.

[malash]

@ALWISHARIFF You can just use wx.request.

If you prefer asiox, you may need some third-party adaptors. I found one but not tried: https://github.com/bigmeow/axios-miniprogram-adapter

[ALWISHARIFF]

@malash Thank you for your fast response I really appreciate your work buddy. Can I know the list of supported components by Goji.js for creating user interfaces. Can we use something like ant mini design if possible are there any alternatives to design libraries for goji.js Thanks buddy

[malash]

@ALWISHARIFF

Can I know the list of supported components by Goji.js for creating user interfaces.

I fault, the documentation on https://goji.js.org is not clear enough 😂. I'll do this work later.

You can find all avialiable components from https://developers.weixin.qq.com/miniprogram/dev/component/ . For example, you use scroll-view like this way: import { ScrollView } from '@goji/core' and <ScrollView scrollX scrollY={false}>.

Can we use something like ant mini design if possible are there any alternatives to design libraries for goji.js

Saidly there is no open-source public UI library for GojiJS yet. In Airbnb, we maintained a private UI library based on a full design system called DLS, but as I know there is no plan to open source.

For now, you can write your components in React and add styles by Linaria. They can work well on you mini program.

[ALWISHARIFF]

Thanks for the support buddy are all css properties in goji.js supported how can I know if a css property is supported or not?

[malash]

@ALWISHARIFF Almost all CSS properties are supported in GojiJS. Additonally you can use rpx, see this link.