Glomo-Boxes is a set of React components that implement Glomo UI and UX vision for desktop and mobile applications.
Glomo-Boxes is available as an npm package
via npm
npm install glomo-boxes --save
via yarn
yarn add glomo-boxes
Here is a quick example of how to get started:
import React from 'react'
import { render } from 'react-dom'
// Glomo box component
import { ShowcaseReel } from 'glomo-boxes'
const App = () => (
<ShowcaseReel>
...items
</ShowcaseReel>
)
render(<App/>, document.querySelector('#root'))
This project comes with a built in development environment for the time being.
yarn start
# open browser with localhost:8080
However you may wish to use something like create-react-app, for local development we will need to go through some steps.
- Install
create-react-app
on your machine.
npm i -g create-react-app
- Instantiate a CRA project.
create-react-app <name-of-your-test-project>
cd <name-of-your-test-project>
- Now we want to create a symbolic link to our modules that will eventually live in npm.
# inside /glomo-boxes
yarn link
# start webpack for development
yarn start
- Next we want to add the symbolic link from our modules inside our CRA test app.
# inside /<name-of-your-test-project>
yarn link glomo-boxes
# start the test app
yarn run rollup
-
Now you are able to make changes in glomo-boxes and see those changes reflected in the CRA test app.
-
Once you're happy with the changes you can unlink the glomo-boxes module from the test app
# inside /<name-of-your-test-project>
yarn unlink glomo-boxes
# install dependency from npm
yarn add glomo-boxes