README
@oerlikon/topology-select
Provides a simple react components for selecting topology nodes
props
minSearchCharacters: Minimum search term length to initialize a search request. Defaults to 3.
zone: Topology zone. Used in all api requests (e.g. in topo://ZONE/node/...). Defaults to local.
Inherits the following properties from material-ui TextField:
- name
- onBlur
- error
- helperText
- className
- label
usage
Single mode
import React, { useState } from 'react';
import { TopologySelect } from '@oerlikon/topology-select';
const BASE_URL = 'http://API_BASE_URL';
const ACCESS_TOKEN = 'my-access-token';
export const MyForm = () => {
const [value, setValue] = useState<string>();
const handleChange = (event: ChangeEvent<{ value: string }>) => {
setValue(event.target.value);
};
return (
<TopologySelect
multiple={false}
value={value}
onChange={handleChange}
label="Select a node"
baseUrl={BASE_URL}
accessToken={ACCESS_TOKEN}
/>
);
};
Multiple mode
import React, { useState } from 'react';
import { TopologySelect } from '@oerlikon/topology-select';
const BASE_URL = 'http://API_BASE_URL';
const ACCESS_TOKEN = 'my-access-token';
export const MyForm = () => {
const [values, setValues] = useState<string[]>([]);
const handleChange = (event: ChangeEvent<{ value: string[] }>) => {
setValues(event.target.value);
};
return (
<TopologySelect
multiple
value={values}
onChange={handleChange}
label="Select multiple nodes"
baseUrl={BASE_URL}
accessToken={ACCESS_TOKEN}
/>
);
};