Welcome to the useGouache
hook. This hook is needed in order to use the Gouache app. Gouache is a Design Data Platform created to help your team collaborate, prototyping & uniformise your apps from design to prod.
- Hot reload (Live updates)
- Loading state
- Production mode
- Styles override using search params
yarn add @gouache-app/use-gouache
npm i @gouache-app/use-gouache --save
import { useGouache } from '@gouache-app/use-gouache';
const App = () => {
const { styles, isLoading } = useGouache({ apiKey: 'MY_GOUACHE_API_KEY' });
if (isLoading) {
return <p>Loading...</p>;
}
return (
<>
<p>{JSON.stringify(styles)}</p>
</>
);
};
Take a look at our docs: https://docs.gouache.app/docs/faq/api-key
We recommend using the use-gouache hook in production using the defaultStyles object in order to prevent fetching the styles object in production. To do so, you need to download the Styles object and use the defaultStyles
and the useDefaultStyles
params.
import defaultStyles from './path_to_downloaded_json_file.json';
const App = () => {
const { styles, isLoading } = useGouache({
apiKey: 'MY_API_KEY',
useDefaultStyles: true,
defaultStyles,
});
if (isLoading) {
return <p>Loading...</p>;
}
return (
<>
<p>{JSON.stringify(styles)}</p>
</>
);
};
When you're using Gouache in production, like said earlier, you should use the defaultStyles object. That said, it did not mean that you cannot use the Gouache platform to test things out. To override the default styles, you can add the following search params to your app URL ?gouache-api-key=MY_GOUACHE_API_KEY
. (replacing MY_GOUACHE_API_KEY
with your project's API key). This will only change the styles in your browser and not on any other user.
ex: https://example.com?gouache-api-key=MY_GOUACHE_API_KEY
For more information about the Gouache, visit https://docs.gouache.app/ and to use the platform, visit https://gouache.app/.
We encourage pull requests and other contributions from the community.
Development tips
to run tests, simply run yarn test
.
If you're getting a Warning: Invalid hook call.
error, it's because there is an issue with the bundler thinking there are "two" react.
There is 2 workaround (I preffer use the first one):
facebook/react#14257 (comment)
cd PACKAGE_YOU_DEBUG_LOCALLY
yarn link
yarn install
cd node_modules/react
yarn link
cd ../../node_modules/react-dom
yarn link
cd YOUR_PROJECT
yarn link PACKAGE_YOU_DEBUG_LOCALLY
yarn link react
yarn link react-dom
and
https://reactjs.org/warnings/invalid-hook-call-warning.html
This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.