Configly React Library

The React library for Configly: the modern config/static data key/value store.

Table of Contents

• What is Configly?
  • Core Features
• Getting Started
  • Get your API Key
  • Library installation
• Usage
• Example
• License

What is Configly?

Configly is the place software developers put their static / config data—like copy, styling, and minor configuration values. They can then update that data directly from https://www.config.ly without having to wait for a deploy process / app store review. Their app or webapp receives the data near instantly. Non-technical folks themselves can publish changes freeing developers to focus on hard software problems and not copy tweaks.

On the backend, Configly provides a read-optimized static-data key/value store built with the aim of being low-latency, and high-availability. The client libraries are made to be dead-simple, lean, and efficient (via enhancements like caching). There is a fancy web UI called the Configulator for setting and updating the configs as well as seeing things like change history. Configly is built for modern software development.

There are a host of other benefits to using Configly ( such as ensuring you do not have data duplicated across clients, reducing load on your primary DB, and better tolerance for traffic spikes), read more about the benefits at Configly.

Core Features

• API to fetch Strings, JSON Blobs (arrays and objects), Booleans, and Numbers from the Configly backend
• Web interface for modifying these values without having to deploy code (we call our beloved web interface the Configulator).
• High availability, high-throughput, low-latency backend.
• Smart caching on the client libraries to minimize server requests.
• Client libraries available in an expanding amount of languages.

Getting Started

Get your API Key

You'll need a Configly account. Registration is lightning quick—you can register via visiting https://www.config.ly/signup.

After signing up, you can grab your API Key from https://www.config.ly/register. You'll need your API Key to setup the API below.

Library installation

npm install configly-react

Usage

You will need to specify your API key using a ConfiglyContext Provider. This should be done at the root of your app.

  import {ConfiglyText, ConfiglyDropdown, ConfiglyContext} from 'configly-react';

  <ConfiglyContext.Provider value={{apiKey: 'MY_API_KEY'}}>
    <div className="App"></div>
  </ConfiglyContext.Provider>

You can then use the predefined components to display text or dropdowns

<ConfiglyText prop="hello"/></ConfiglyText>
<ConfiglyDropdown prop="hello-dropdown"/>

If you want to provide a default value that will display before the value is loaded, use the default parameter. The default value will be run through the component's render function.

To render a custom component, you will pass a render function to the ConfiglyComponent. It takes a single argument, which is the value returned by Configly.

function renderCustom(value) {
  return(<span>
    <input type="checkbox" checked={value} />
  </span>);
}

<ConfiglyComponent prop="hello-custom" render={renderCustom} />

Example

You can run the sample app located in the demo folder for a working example.

License

This repository is published under the MIT license.