Skip to content

Getting Started Guide

Install Photon and its dependencies. 

1
npm install --save-dev photoncss jquery react react-dom

Set up the main file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from "react";
import { render } from "react-dom";
import { ThemeProvider } from "photoncss/react";    // Import Photon in to the project
import "photoncss/dist/photon.css";                 // Import the Photon stylesheet

// Create the root element
export function Root() {
    return (
        <ThemeProvider global>
            <p>PhotonCSS Demo</p>
        </ThemeProvider>
    );
}

// Wait for the DOM to load before rendering
document.addEventListener("DOMContentLoaded", function() {

    // Append a container to the DOM to render content into
    const root = document.createElement("DIV");
    root.id = "root";
    document.body.append(root);

    // Render root component into react-root container
    render(<Root/>, document.getElementById("root"));

});

Importing components

All components are imported from the module photoncss/react.

1
2
3
4
5
6
7
8
9
import { Button } from "photoncss/react"

export function Root() {
    return (
        <ThemeProvider global>
            <Button variant="raised" color="primary">Hello World</Button>
        </ThemeProvider>
    );
}

Using custom themes

For custom themes, you need the <ThemeProvider/> component.