Skip to content
lilypad / 1.1.6

lilypad 1.1.6

Install from the command line:
Learn more about npm packages
$ npm install @mozilla/lilypad@1.1.6
Install via package.json:
"@mozilla/lilypad": "1.1.6"

About this version

lilypad

React Component Library

  _        _   _                               _
 | |      (_) | |                             | |
 | |       _  | |  _   _   _ __     __ _    __| |
 | |      | | | | | | | | | '_ \   / _` |  / _` |
 | |____  | | | | | |_| | | |_) | | (_| | | (_| |
 |______| |_| |_|  \__, | | .__/   \__,_|  \__,_|
                    __/ | | |
                   |___/  |_|

Installation

Lilypad is available as an npm package.

Step 1.

First, create an access token on Github to fetch our maintained Lilypad component library on npm, you need to create an access token on github and enable Mozilla organization on the access token.

Step 2.

Configure your local install of NPM itself to be authorized to use Lilypad. To do this we use a .npmrc file. This file is NOT PART OF YOUR PROJECT. This is a global file in a central location. For Mac/Linux users it goes in your home directory ~/.npmrc.

For Windows users it goes in your home directory as well, though the syntax will be different. Something along the lines of C:\Users{YOUR_WINDOWS_USERNAME}

Step 3.

Once you have created the file, edit it to include the following information:

~/.npmrc

registry=https://registry.npmjs.org/
@YOUR_GITHUB_USERNAME:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN

Step 4.

npm:

npm install @mozilla/lilypad

yarn:

yarn add @mozilla/lilypad

Getting started with Lilypad

Here is an example of a basic app using Lilypad's Button component:

import * as React from 'react';
import { Button, ButtonCategoriesE } from '@mozilla/lilypad';

function App() {
  return (
    <Button
      category={ButtonCategoriesE.PRIMARY_SOLID}
      icon="alert-circle"
      text="click me!!"
    />
  );
}

Adding Styles

@import '@mozilla/lilypad/dist/styles/theme.scss';
  // Set to Light Theme,
  // Note: if a "data-theme" is not set on <main> it will default the "light" theme
 <main data-theme="light"></main>

 // Set to Dark Theme
 <main data-theme="dark"></main>

 // Get theme from users settings "dark" or "light"
 <main data-theme={themeFromUserSettings}></main>

This will also let you access all of the great utility classes here utility.scss.

Feel free to override these CSS variables with your own colors!

License

This project is licensed under the terms of the Mozilla Public License 2.0.

Details


Assets

  • lilypad-1.1.6.tgz

Download activity

  • Total downloads 73
  • Last 30 days 0
  • Last week 0
  • Today 0