6.1.57 • Published 11 months ago

@cloudflare/component-dropdown v6.1.57

Weekly downloads
1,395
License
BSD-3-Clause
Repository
-
Last release
11 months ago

@cloudflare/component-dropdown

Cloudflare Dropdown Component

Installation

Installation with yarn is recommended

$ yarn add @cloudflare/component-dropdown

Usage

import React from 'react';
import { Dropdown, DropdownLink, DropdownSeparator } from '../../src';
import { Button, ButtonGroup } from '@cloudflare/component-button';
import { Code } from '@cloudflare/component-code';

class DropdownComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dropdown1Open: false,
      dropdown2Open: false
    };
  }

  render() {
    return (
      <div>
        <ButtonGroup>
          <Button
            type="primary"
            onClick={() => this.setState({ dropdown1Open: true })}
          >
            Open Dropdown 1
          </Button>

          {this.state.dropdown1Open && (
            <Dropdown onClose={() => this.setState({ dropdown1Open: false })}>
              <DropdownLink to="/foo">Link to /foo</DropdownLink>
              <DropdownLink to="/bar">Link to /bar</DropdownLink>
              <DropdownSeparator />
              <DropdownLink to="/baz">Link to /baz</DropdownLink>
              <DropdownLink to="/bat">Link to /bat</DropdownLink>
              <DropdownLink disabled to="/bad">
                Disabled dropdown link
              </DropdownLink>
            </Dropdown>
          )}

          <Button
            type="success"
            onClick={() => this.setState({ dropdown2Open: true })}
          >
            Open Dropdown 2
          </Button>

          {this.state.dropdown2Open && (
            <Dropdown
              align="right"
              onClose={() => this.setState({ dropdown2Open: false })}
            >
              <DropdownLink to="/foo">Link to /foo</DropdownLink>
              <DropdownLink to="/bar">Link to /bar</DropdownLink>
              <DropdownSeparator />
              <DropdownLink to="/baz">Link to /baz</DropdownLink>
              <DropdownLink to="/bat">Link to /bat</DropdownLink>
            </Dropdown>
          )}
        </ButtonGroup>
        <p>
          {`You can also optionally pass an align prop with either "left" or
          "right"`}
        </p>
        <Code isCodeBlock={true}>{`<Dropdown align="right" ...>`}</Code>
        <p>
          <Code>{`<DropdownLink/>`}</Code> just wraps cf-component-link so you
          can use either to to specify a route or pass an onClick handler.
        </p>
        <Code isCodeBlock={true}>{`<DropdownLink to="/my-route"/>`}</Code>
        <Code
          isCodeBlock={true}
        >{`<DropdownLink onClick={this.handleClick}/>`}</Code>
        <p>
          Note: to requires that you setup cf-util-route-handler prior to
          routing.
        </p>
      </div>
    );
  }
}

export default DropdownComponent;
6.1.57

11 months ago

6.1.53

12 months ago

6.1.52

12 months ago

6.1.56

12 months ago

6.1.55

12 months ago

6.1.54

12 months ago

6.1.51

1 year ago

6.1.50

1 year ago

6.1.49

1 year ago

6.1.48

1 year ago

6.1.47

1 year ago

6.1.46

1 year ago

6.1.42

1 year ago

6.1.41

1 year ago

6.1.40

1 year ago

6.1.45

1 year ago

6.1.44

1 year ago

6.1.43

1 year ago

6.1.39

1 year ago

6.1.38

1 year ago

6.1.37

1 year ago

6.1.36

1 year ago

6.1.35

1 year ago

6.1.34

1 year ago

6.1.33

1 year ago

6.1.31

1 year ago

6.1.32

1 year ago

6.1.30

1 year ago

6.1.29

1 year ago

6.1.28

2 years ago

6.1.27

2 years ago

6.1.26

2 years ago

6.1.25

2 years ago

6.1.24

2 years ago

6.1.23

2 years ago

6.1.22

2 years ago

6.1.21

2 years ago

6.1.20

2 years ago

6.1.19

2 years ago

6.1.18

2 years ago

6.1.6

2 years ago

6.1.5

2 years ago

6.1.8

2 years ago

6.1.7

2 years ago

6.1.9

2 years ago

6.0.16

2 years ago

6.0.15

2 years ago

6.0.14

2 years ago

6.0.13

2 years ago

6.1.17

2 years ago

6.1.16

2 years ago

6.1.15

2 years ago

6.1.14

2 years ago

6.1.13

2 years ago

6.1.12

2 years ago

6.1.11

2 years ago

6.1.10

2 years ago

6.1.0

2 years ago

6.1.2

2 years ago

6.1.1

2 years ago

6.1.4

2 years ago

6.1.3

2 years ago

6.0.12

2 years ago

6.0.7

2 years ago

6.0.9

2 years ago

6.0.8

2 years ago

6.0.11

2 years ago

6.0.10

2 years ago

6.0.6

2 years ago

6.0.3

2 years ago

6.0.5

2 years ago

6.0.4

2 years ago

6.0.1

3 years ago

6.0.2

2 years ago

6.0.0

3 years ago

5.0.0

3 years ago

4.4.0

3 years ago

4.3.0

3 years ago

4.2.194

3 years ago

4.2.192

3 years ago

4.2.193

3 years ago

4.2.190

3 years ago

4.2.191

3 years ago

4.2.183

3 years ago

4.2.184

3 years ago

4.2.181

3 years ago

4.2.182

3 years ago

4.2.180

3 years ago

4.2.189

3 years ago

4.2.187

3 years ago

4.2.188

3 years ago

4.2.185

3 years ago

4.2.186

3 years ago

4.2.172

3 years ago

4.2.173

3 years ago

4.2.170

3 years ago

4.2.171

3 years ago

4.2.178

3 years ago

4.2.179

3 years ago

4.2.176

3 years ago

4.2.177

3 years ago

4.2.174

3 years ago

4.2.175

3 years ago

4.2.169

3 years ago

4.2.167

3 years ago

4.2.168

3 years ago

4.2.161

3 years ago

4.2.162

3 years ago

4.2.160

3 years ago

4.2.165

3 years ago

4.2.166

3 years ago

4.2.163

3 years ago

4.2.164

3 years ago

4.2.149

3 years ago

4.2.150

3 years ago

4.2.151

3 years ago

4.2.158

3 years ago

4.2.159

3 years ago

4.2.156

3 years ago

4.2.157

3 years ago

4.2.154

3 years ago

4.2.155

3 years ago

4.2.152

3 years ago

4.2.153

3 years ago

4.2.138

4 years ago

4.2.139

4 years ago

4.2.140

4 years ago

4.2.147

3 years ago

4.2.148

3 years ago

4.2.145

3 years ago

4.2.146

3 years ago

4.2.143

3 years ago

4.2.144

3 years ago

4.2.141

3 years ago

4.2.142

3 years ago

4.2.129

4 years ago

4.2.127

4 years ago

4.2.128

4 years ago

4.2.136

4 years ago

4.2.137

4 years ago

4.2.134

4 years ago

4.2.135

4 years ago

4.2.132

4 years ago

4.2.133

4 years ago

4.2.130

4 years ago

4.2.131

4 years ago

4.2.125

4 years ago

4.2.126

4 years ago

4.2.123

4 years ago

4.2.124

4 years ago

4.2.121

4 years ago

4.2.122

4 years ago

4.2.103

4 years ago

4.2.104

4 years ago

4.2.101

4 years ago

4.2.102

4 years ago

4.2.100

4 years ago

4.2.97

4 years ago

4.2.98

4 years ago

4.2.99

4 years ago

4.2.96

4 years ago

4.2.118

4 years ago

4.2.119

4 years ago

4.2.116

4 years ago

4.2.117

4 years ago

4.2.120

4 years ago

4.2.109

4 years ago

4.2.107

4 years ago

4.2.108

4 years ago

4.2.105

4 years ago

4.2.106

4 years ago

4.2.114

4 years ago

4.2.115

4 years ago

4.2.112

4 years ago

4.2.113

4 years ago

4.2.110

4 years ago

4.2.111

4 years ago

4.2.90

4 years ago

4.2.91

4 years ago

4.2.92

4 years ago

4.2.93

4 years ago

4.2.94

4 years ago

4.2.95

4 years ago

4.2.80

4 years ago

4.2.81

4 years ago

4.2.86

4 years ago

4.2.87

4 years ago

4.2.88

4 years ago

4.2.89

4 years ago

4.2.82

4 years ago

4.2.83

4 years ago

4.2.84

4 years ago

4.2.85

4 years ago

4.2.78

4 years ago

4.2.79

4 years ago

4.2.76

4 years ago

4.2.77

4 years ago

4.2.75

4 years ago

4.2.73

4 years ago

4.2.74

4 years ago

4.2.71

4 years ago

4.2.72

4 years ago

4.2.70

4 years ago

4.2.69

4 years ago

4.2.68

4 years ago

4.2.67

4 years ago

4.2.64

4 years ago

4.2.65

4 years ago

4.2.66

4 years ago

4.2.63

4 years ago

4.2.62

4 years ago

4.2.60

4 years ago

4.2.61

4 years ago

4.2.59

4 years ago

4.2.56

4 years ago

4.2.57

4 years ago

4.2.58

4 years ago

4.2.54

4 years ago

4.2.55

4 years ago

4.2.53

4 years ago

4.2.52

4 years ago

4.2.49

4 years ago

4.2.50

4 years ago

4.2.51

4 years ago

4.2.46

4 years ago

4.2.47

4 years ago

4.2.48

4 years ago

4.2.45

4 years ago

4.2.42

4 years ago

4.2.43

4 years ago

4.2.44

4 years ago

4.2.40

4 years ago

4.2.41

4 years ago

4.2.39

4 years ago

4.2.37

4 years ago

4.2.38

4 years ago

4.2.33

4 years ago

4.2.34

4 years ago

4.2.35

4 years ago

4.2.36

4 years ago

4.2.21

4 years ago

4.2.22

4 years ago

4.2.23

4 years ago

4.2.28

4 years ago

4.2.29

4 years ago

4.2.24

4 years ago

4.2.25

4 years ago

4.2.26

4 years ago

4.2.27

4 years ago

4.2.31

4 years ago

4.2.32

4 years ago

4.2.20

4 years ago

4.2.19

4 years ago

4.2.18

4 years ago

4.2.17

4 years ago

4.2.16

4 years ago

4.2.15

4 years ago

4.2.13

5 years ago

4.2.14

5 years ago

4.2.12

5 years ago

4.2.10

5 years ago

4.2.11

5 years ago

4.2.9

5 years ago

4.2.8

5 years ago

4.2.7

5 years ago

4.2.6

5 years ago

4.2.5

5 years ago

4.2.4

5 years ago

4.2.3

5 years ago

4.2.2

5 years ago

4.2.1

5 years ago

4.2.0

5 years ago

4.1.347

5 years ago

4.1.346

5 years ago

4.1.345

5 years ago

4.1.344

5 years ago

4.1.343

5 years ago

4.1.342

5 years ago

4.1.341

5 years ago

4.1.340

5 years ago

4.1.338

5 years ago

4.1.339

5 years ago

4.1.337

5 years ago

4.1.336

5 years ago

4.1.335

5 years ago

4.1.333

5 years ago

4.1.334

5 years ago

4.1.332

5 years ago

4.1.331

5 years ago

4.1.330

5 years ago

4.1.329

5 years ago

4.1.327

5 years ago

4.1.328

5 years ago

4.1.326

5 years ago

4.1.324

5 years ago

4.1.325

5 years ago

4.1.323

5 years ago

4.1.322

5 years ago

4.1.321

5 years ago

4.1.320

5 years ago

4.1.319

5 years ago

4.1.315

5 years ago

4.1.316

5 years ago

4.1.317

5 years ago

4.1.318

5 years ago

4.1.314

5 years ago

4.1.312

5 years ago

4.1.313

5 years ago

4.1.311

5 years ago

4.1.310

5 years ago

4.1.309

5 years ago

4.1.308

5 years ago

4.1.306

5 years ago

4.1.307

5 years ago

4.1.305

5 years ago

4.1.304

5 years ago

4.1.303

5 years ago

4.1.302

5 years ago

4.1.301

5 years ago

4.1.300

5 years ago

4.1.299

5 years ago

4.1.297

5 years ago

4.1.298

5 years ago

4.1.296

5 years ago

4.1.294

5 years ago

4.1.295

5 years ago

4.1.293

5 years ago

4.1.292

5 years ago

4.1.291

5 years ago

4.1.290

5 years ago

4.1.289

5 years ago

4.1.288

5 years ago

4.1.287

5 years ago

4.1.285

5 years ago

4.1.286

5 years ago

4.1.284

5 years ago

4.1.283

5 years ago

4.1.282

5 years ago

4.1.281

5 years ago

4.1.280

5 years ago

4.1.279

5 years ago

4.1.278

5 years ago

4.1.277

5 years ago

4.1.276

5 years ago

4.1.275

5 years ago

4.1.274

5 years ago

4.1.273

5 years ago

4.1.272

5 years ago

4.1.270

5 years ago

4.1.271

5 years ago

4.1.269

5 years ago

4.1.268

5 years ago

4.1.267

5 years ago

4.1.266

5 years ago

4.1.265

5 years ago

4.1.264

5 years ago

4.1.263

5 years ago

4.1.262

5 years ago

4.1.261

5 years ago

4.1.260

5 years ago

4.1.259

5 years ago

4.1.257

5 years ago

4.1.258

5 years ago

4.1.256

5 years ago

4.1.255

5 years ago

4.1.254

5 years ago

4.1.253

5 years ago

4.1.252

5 years ago

4.1.250

5 years ago

4.1.251

5 years ago

4.1.249

5 years ago

4.1.248

5 years ago

4.1.247

5 years ago

4.1.246

5 years ago

4.1.245

5 years ago

4.1.244

5 years ago

4.1.243

5 years ago

4.1.242

5 years ago

4.1.240

5 years ago

4.1.238

5 years ago

4.1.237

5 years ago

4.1.234

5 years ago

4.1.235

5 years ago

4.1.236

5 years ago

4.1.231

5 years ago

4.1.232

5 years ago

4.1.233

5 years ago

4.1.230

5 years ago

4.1.228

5 years ago

4.1.229

5 years ago

4.1.227

5 years ago

4.1.226

5 years ago

4.1.225

5 years ago

4.1.224

5 years ago

4.1.223

5 years ago

4.1.222

5 years ago

4.1.221

6 years ago

4.1.220

6 years ago

4.1.218

6 years ago

4.1.219

6 years ago

4.1.217

6 years ago

4.1.216

6 years ago

4.1.215

6 years ago

4.1.214

6 years ago

4.1.213

6 years ago

4.1.212

6 years ago

4.1.210

6 years ago

4.1.211

6 years ago

4.1.209

6 years ago

4.1.208

6 years ago

4.1.203

6 years ago

4.1.202

6 years ago

4.1.201

6 years ago

4.1.200

6 years ago

4.1.183

6 years ago

4.1.184

6 years ago

4.1.182

6 years ago

4.1.181

6 years ago

4.1.180

6 years ago

4.1.179

6 years ago

4.1.177

6 years ago

4.1.178

6 years ago

4.1.175

6 years ago

4.1.176

6 years ago

4.1.173

6 years ago

4.1.174

6 years ago

4.1.171

6 years ago

4.1.172

6 years ago

4.1.170

6 years ago

4.1.169

6 years ago

4.1.164

6 years ago

4.1.165

6 years ago

4.1.166

6 years ago

4.1.167

6 years ago

4.1.163

6 years ago

4.1.162

6 years ago

4.1.161

6 years ago

4.1.159

6 years ago

4.1.158

6 years ago

4.1.157

6 years ago

4.1.156

6 years ago

4.1.154

6 years ago

4.1.153

6 years ago

4.1.152

6 years ago

4.1.151

6 years ago

4.1.150

6 years ago

4.1.149

6 years ago

4.1.148

6 years ago

4.1.147

6 years ago

4.1.146

6 years ago

4.1.145

6 years ago

4.1.144

6 years ago

4.1.142

6 years ago

4.1.140

6 years ago

4.1.141

6 years ago

4.1.139

6 years ago

4.1.137

6 years ago

4.1.138

6 years ago

4.1.135

6 years ago

4.1.136

6 years ago

4.1.134

6 years ago

4.1.132

6 years ago

4.1.130

6 years ago

4.1.125

6 years ago

4.1.126

6 years ago

4.1.124

6 years ago

4.1.123

6 years ago

4.1.122

6 years ago

4.1.121

6 years ago

4.1.119

6 years ago

4.1.118

6 years ago

4.1.117

6 years ago

4.1.116

6 years ago

4.1.115

6 years ago

4.1.114

6 years ago

4.1.113

6 years ago

4.1.112

6 years ago

4.1.111

6 years ago

4.1.110

6 years ago

4.1.109

6 years ago

4.1.108

6 years ago

4.1.107

6 years ago

4.1.106

6 years ago

4.1.105

6 years ago

4.1.104

6 years ago

4.1.103

6 years ago

4.1.102

6 years ago

4.1.101

6 years ago

4.1.100

6 years ago

4.1.99

6 years ago

4.1.98

6 years ago

4.1.97

6 years ago

4.1.96

6 years ago

4.1.95

6 years ago

4.1.94

6 years ago

4.1.93

6 years ago

4.1.92

6 years ago

4.1.91

6 years ago

4.1.90

6 years ago

4.1.89

6 years ago

4.1.88

6 years ago

4.1.87

6 years ago

4.1.86

6 years ago

4.1.85

6 years ago

4.1.84

6 years ago

4.1.83

6 years ago

4.1.82

6 years ago

4.1.81

6 years ago

4.1.80

6 years ago

4.1.79

6 years ago

4.1.78

6 years ago

4.1.77

6 years ago

4.1.76

6 years ago

4.1.75

6 years ago

4.1.74

6 years ago

4.1.73

6 years ago

4.1.72

6 years ago

4.1.71

6 years ago

4.1.70

6 years ago

4.1.69

6 years ago

4.1.68

6 years ago

4.1.67

6 years ago

4.1.66

6 years ago

4.1.65

6 years ago

4.1.64

6 years ago

4.1.63

6 years ago

4.1.62

6 years ago

4.1.61

6 years ago

4.1.60

6 years ago

4.1.59

6 years ago

4.1.58

6 years ago

4.1.57

6 years ago

4.1.56

6 years ago

4.1.55

6 years ago

4.1.54

6 years ago

4.1.53

6 years ago

4.1.52

6 years ago

4.1.51

6 years ago

4.1.50

6 years ago

4.1.49

6 years ago

4.1.48

6 years ago

4.1.47

6 years ago

4.1.46

6 years ago

4.1.45

6 years ago

4.1.44

6 years ago

4.1.43

6 years ago

4.1.42

6 years ago

4.1.41

6 years ago

4.1.40

6 years ago

4.1.39

6 years ago

4.1.38

6 years ago

4.1.37

6 years ago

4.1.36

6 years ago

4.1.35

6 years ago

4.1.34

6 years ago

4.1.33

6 years ago

4.1.32

6 years ago

4.1.31

6 years ago

4.1.30

6 years ago

4.1.29

6 years ago

4.1.28

6 years ago

4.1.27

7 years ago

4.1.26

7 years ago

4.1.25

7 years ago

4.1.24

7 years ago

4.1.23

7 years ago

4.1.22

7 years ago

4.1.21

7 years ago

4.1.20

7 years ago

4.1.19

7 years ago

4.1.18

7 years ago

4.1.17

7 years ago

4.1.16

7 years ago

4.1.15

7 years ago

4.1.14

7 years ago

4.1.13

7 years ago

4.1.12

7 years ago

4.1.11

7 years ago

4.1.10

7 years ago

4.1.9

7 years ago

4.1.8

7 years ago

4.1.7

7 years ago

4.1.6

7 years ago

4.1.5

7 years ago

4.1.4

7 years ago

4.1.3

7 years ago

4.1.2

7 years ago

4.1.1

7 years ago

4.1.0

7 years ago

4.0.26

7 years ago

4.0.25

7 years ago

4.0.24

7 years ago

4.0.23

7 years ago

4.0.22

7 years ago

4.0.21

7 years ago

4.0.20

7 years ago

4.0.19

7 years ago

4.0.18

7 years ago

4.0.17

7 years ago

4.0.16

7 years ago

4.0.15

7 years ago

4.0.14

7 years ago

4.0.13

7 years ago

4.0.12

7 years ago

4.0.11

7 years ago

4.0.10

7 years ago

4.0.9

7 years ago

4.0.8

7 years ago

4.0.7

7 years ago

4.0.6

7 years ago

4.0.5

7 years ago

4.0.4

7 years ago

4.0.3

7 years ago

4.0.2

7 years ago

4.0.1

7 years ago

4.0.0

7 years ago

3.0.5

7 years ago

3.0.4

7 years ago

3.0.3

7 years ago

3.0.2

7 years ago

3.0.1

7 years ago

3.0.0

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.0.21

7 years ago

1.0.20

7 years ago

1.0.19

7 years ago

1.0.18

7 years ago

1.0.17

7 years ago

1.0.16

7 years ago

1.0.15

7 years ago

1.0.14

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago