Is it possible to stretch the input field by giving rows={3} using reactjs

Question

I'm using react-chips for displaying email into chips "https://www.npmjs.com/package/react-chips". Here my objective is to stretch the chip input field like rows={3} column={20}. but Couldn't able to find how to give in react-chips. Is it possible to stretch the respective field? can anyone help me in this query?

Here is the code:

 <Container>
        <Modal trigger={<Button>Show Modal</Button>}>
          <Modal.Content>
            <Form>
              <strong>Email</strong>
              <Chips
                className="f_input"
                value={this.state.chips}
                onChange={this.onChange}
                suggestions={["Your", "Data", "Here"]}
                chipTheme={{
                  chip: {
                    border: "none",
                    borderBottom: "1px solid black"
                  },
                  chipRemove: {
                    fontWeight: "bold",
                    cursor: "pointer",
                    color: "green",
                    ":hover": {
                      color: "yellow"
                    }
                  }
                }}
              />
              <Form.Field
                transparent
                className="f_input"
                control={Input}
                label="Subject"
              />

              <TextArea placeholder="Email Format" />
            </Form>

            <Button>Send</Button>
          </Modal.Content>
        </Modal>
      </Container>

Here is the whole code

Can anyone please help me in stretching the chip input field?

Answer 1

The Chips component accepts a prop called theme in which you can change the input CSS. Add this to your Chips component and play around a bit:

 theme={{
   chipsContainer: {
     width: "100%",
     minHeight: 150,
     display: "flex",
     flexWrap: "wrap",
     border: "1px solid #ccc",
     alignContent: "flex-start"
   },
   container: {
     flex: 1
   },
   input: {
     border: "none"
   }
 }}

And in your chipTheme your chip should be like this:

chip: {
  border: "none",
  borderBottom: "1px solid black",
  height: 24
}

References:

• https://github.com/gregchamberlain/react-chips/blob/master/src/theme.js
• https://github.com/gregchamberlain/react-chips#styles