Provide instructions on how to use Grommet without its accompanying development stack (grommet-toolbox)

[adrianmcli]

The documentation for someone who wants to integrate Grommet into an existing project is currently kind of lacking as evidenced by #632. Perhaps there needs to be more focus in the docs for something simpler, maybe along the lines of:

1. First, install Grommet from NPM into your project: npm install --save grommet

2. Wrap your entire app inside the <App> component:

   import App from 'grommet/components/App';
   
   const Layout = () => (
   <App>
   <MyAppHere />
   </App>
   );

3. Finally, simply import the component you need and use it right away.

   import LoginForm from 'grommet/components/LoginForm';
   
   const Component = () => (
   <div>
     <LoginForm onSubmit={console.log('login clicked')} />
   </div>
   );

Also, maybe it would be a good idea to give the user an option that does not require wrapping the entire app inside the <App> component. I always found that to be a little bit weird, because it requires you to completely buy into the Grommet way of doing things. I think a more gradual or softer approach can win over more users.

[alansouzati]

thanks for the suggestion. I will work on that.

FYI, you don't need to wrap the entire application inside the Grommet App component. A lot of our components will work without it. The challenge is the base HTML elements like textarea, inputs. etc. These elements will only have style applied if present inside the Grommet App component, which makes sense in my opinion.

[adrianmcli]

Good point. Perhaps that should be documented too, because it's not immediately clear what the App container does or does not do in terms of affecting other components within it.

[alansouzati]

sure thing. let me address that in the docs as well.

[Adam-Burke]

I get the following error when following the documentation at the top and wrapping my current app in the grommet App component.

invariant.js:38 Uncaught Invariant Violation: addComponentAsRefTo(...)

which I have read is normally caused by duplicate loadings of react on the client side. Can someone assist me in solving this error. I'm very new to react so I imagine it could be something simple.

[digital-flowers]

i have managed to successfully run grommet as a library with webpack for development and production also register grommet components as web components using reactive elements library where you can use grommet directly inside the html or template engine such as ejs or jade this will improve SEO and make the application easier to maintain, soon i will write full documentation on how to do that

[alansouzati]

That sounds cool @digital-flowers.

If you can share the project as well it would be awesome.

Even better, you could be a guest author in our blog https://blog.grommet.io

[alansouzati]

If you are interested to understand what is the minium set of tools required for grommet to work, please check the grommet-standalone project: https://github.com/grommet/grommet-standalone