Cloudflare UI Framework

The cf-style-provider includes a named-media-query plugin with a pre-configured set of media queries. Use these keys in your component style definitions to ensure consistent responsive behavior.

Available Media Queries:

• mobile: @media (min-width: 13.6em)
• mobileWide: @media (min-width: 30.4em)
• tablet: @media (min-width: 47.2em)
• desktop: @media (min-width: 64em)
• desktopLarge: @media (min-width: 97.6em)

Example Usage:

const Column = createComponent(() => ({
  color: 'black',
  desktop: {
    color: 'white'
  }
}))

To manage and display notifications, use <NotificationList/> as a container for <Notification/> components. For global notifications, wrap the <NotificationList/> inside a <NotificationGlobalContainer/>.

<NotificationGlobalContainer>
  <NotificationList>
    {notifications}
  </NotificationList>
</NotificationGlobalContainer>

The handleRoutes function accepts a single callback function that receives a url as its argument. This callback is executed whenever a route change is triggered. You can only call handleRoutes once in your application lifecycle.

handleRoutes(url => {
  takeActionWithUrl(url);
});

When building complex features or systems (such as React/Redux applications), avoid attempting to solve the entire problem from start to finish in a single pass. Instead, break the problem down into incremental layers. Each layer should be carefully considered, reviewed, and documented before moving to the next.

Benefits of layering:

• Allows for incremental progress and easier reviews.
• Prevents 'tunnel vision' where you work toward an end-to-end solution without validating the foundations.
• Enables the creation of reusable, open-sourceable libraries from the lower layers.
• Improves the quality of the final API design.

Selectors Lite™ are getter functions used to abstract state lookups and filters out of components. While Redux actions and reducers handle most business logic, selectors are used for the remaining 10% of logic—specifically retrieving specific pieces of state or filtering collections—to keep components 'dumb' and focused on rendering.

Use a selector when you find yourself performing logic like this directly in JSX:

• Deeply nested state lookups: state.zones.all[state.zones.current].name
• Filtering or mapping collections: state.zones.all.filter(zone => zone.isPartnerHosted)

By replacing these with selector functions, you make components easier to test and refactor.

When contributing new code to cf-ui, avoid using class inheritance. Instead, favor composing plain functions together. Inheritance in JavaScript can lead to bugs caused by implicit dependencies on this, accidental modification of parent class properties, or breaking parent class methods by unintentionally changing the interface (e.g., failing to return a value in a subclass method that the parent class expects). Plain functions provide explicit dependencies via parameters and clearly defined outputs, making code paths easier to follow and logic easier to isolate.

// Instead of inheritance:
class Foo {
  method() {
    doSomething();
  }
}

class Bar extends Foo {
  method() {
    doSomethingElse();
    super.method();
  }
}

// Use function composition:
function fooMethod() {
  doSomething();
}

function barMethod() {
  doSomethingElse();
  fooMethod();
}

The cf-style-const package provides constants used to theme cf-ui, cf-ux, and other Fela-based components.

Important: You should not import these constants directly. Instead, the variables are automatically passed through the React component tree via this.context.theme in projects using CSS-in-JS.

To access these theme variables in your own components, use a Higher-Order Component (HOC) like createComponent() from cf-style-container. This HOC wires this.context.theme into props.theme, making the constants available as props.

Install the cf-component-toggle package using npm to use the Cloudflare Toggle component in your project.

$ npm install cf-component-toggle

cf-ui components use CSS-in-JS powered by Fela. To use these components, you must include a StyleProvider (from cf-style-provider) in the context of your React application. The StyleProvider is responsible for rendering the component styles into <style> nodes.

import React from 'react';
import ReactDOM from 'react-dom';
import { StyleProvider } from 'cf-style-provider';
import { Button } from 'cf-component-button';

ReactDOM.render(
  <StyleProvider>
    <Button type="primary" onClick={() => console.log('clicked')}>
      Primary Button
    </Button>
  </StyleProvider>,
  document.getElementById('react-app')
);

Install the dropdown component package using npm:

$ npm install cf-component-dropdown