Provide instructions on how to use Grommet without its accompanying development stack (grommet-toolbox)
See original GitHub issueThe 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:
-
First, install Grommet from NPM into your project:
npm install --save grommet
-
Wrap your entire app inside the
<App>
component:import App from 'grommet/components/App'; const Layout = () => ( <App> <MyAppHere /> </App> );
-
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.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:7 (5 by maintainers)
Top GitHub Comments
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
sure thing. let me address that in the docs as well.