@ninjas4744/lib

A package of components and utilities used in apps written by FRC team Ninjas #4744

Usage of components

Form fields

TextField

Basic text form field

<TextField label="Your Name" value={name} onChangeText={setName} />

Autocomplete

const goats = [
  "Joel Matip",
  "Divock Origi",
  "Dominik Szoboszlai"
];
<Autocomplete label="Who is the best player ever?" value={goat} onChangeText={setGoat} suggestions={goats} />

Dropdown

<Dropdown label="What is your favorite color?" value={color} onValueChange={setColor} options={["Red", "Green", "Blue"]} />

Checkbox

<Checkbox label="I agree to the terms and conditions" cheked={agree} onValueChange={setAgree} />

Radio

<Radio label="Blue" selected={alliance === 'blue'} onValueChange={() => setAlliance('blue')} />
<Radio label="Red" selected={alliance === 'red'} onValueChange={() => setAlliance('red')} />

Layout

Stack

<Stack direction="column" style={{ padding: 30 }}>
  <TextField label="First Name" value={firstName} onChangeText={setFirstName} />
  <TextField label="Last Name" value={lastName} onChangeText={setLastName} />
</Stack>

Container

<Container style={{ padding: 30 }} centered>
  <Text>Some content</Text>
</Container>

Add the package to your npm dependencies

npm install @ninjas4744/lib

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.