ManuelHaag / gw2-ui

React components and API wrapper for Guild Wars 2
https://manuelhaag.github.io/gw2-ui/
MIT License
11 stars 6 forks source link

Is there a minimal example for gw2-ui? #5

Open acbetter opened 3 years ago

acbetter commented 3 years ago

I tried to use gw2-ui in my react next.js repo, but i can't fix it because of redux issues. Here's my code, help

next-redux-thunk-example.zip

image

ManuelHaag commented 3 years ago

For now, you can refer to the gw2-ui-docs package source code.

You'll want to create your redux store similar to this:

https://github.com/ManuelHaag/gw2-ui/blob/8820e94a943e908ec360b8d3b146928c009f6870/packages/gw2-ui-docs/.storybook/createStore.js#L1-L23

and wrap your app like this:

import { Provider } from 'react-redux';
import { ThemeProvider, baseTheme } from 'gw2-ui';
import createStore from './createStore';

const store = createStore();

// ...
  <Provider store={store}>
    <ThemeProvider theme={baseTheme}>
      <App/>
    </ThemeProvider>
  </Provider>
// ...

Then you can use the components as in the gw2-ui Storybook - check the right panel's tabs for available props.

acbetter commented 3 years ago

Thanks for the reply and it worked very well for me. Very thanks! I'm not familiar with react-redux...

Now here I get another question, MistlockInstability is fine for me but when I try to use skill template then getUncaught TypeError: Cannot read property 'FETCH_SKILL14375' of undefined error.

import './App.css';
import { Skill } from "gw2-ui";
import { MistlockInstability } from 'gw2-ui';

function App() {
  return (
    <div className="App">
      <Skill id={14375} />
      <MistlockInstability name="Adrenaline Rush" />
    </div>
  );
}

export default App;

I think it's a prop type issue so I tried to use int(number) prop but didn't work. I tried to look up the source code of Skill component but I can't understand it very well.

Here's my code, one with next.js and the other use pure react code. Both got the same exception.

next-gw2-ui-example.zip react-gw2-ui-example.zip

image image