Glomo Boxes

Glomo-Boxes is a set of React components that implement Glomo UI and UX vision for desktop and mobile applications.

Installation

Glomo-Boxes is available as an npm package

via npm

npm install glomo-boxes --save 

via yarn

yarn add glomo-boxes

Usage

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'))

Developing Locally

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.

1. Install create-react-app on your machine.

npm i -g create-react-app

1. Instantiate a CRA project.

create-react-app <name-of-your-test-project>
cd <name-of-your-test-project>

1. 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

1. 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

1. Now you are able to make changes in glomo-boxes and see those changes reflected in the CRA test app.

2. 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