2.1.40 • Published 5 months ago

react-tab-set v2.1.40

Weekly downloads
5
License
ISC
Repository
github
Last release
5 months ago

react-tab-set

A React component for rendering tabbed content.

<TabSet selectedTab='one'>
  <TabGroup>
    <Tab tab='one'>
      One
    </Tab>
    <Tab tab='two'>
      Two
    </Tab>
  </TabGroup>
  <TabPanel tab='one'>
    One
  </TabPanel>
  <TabPanel tab='two'>
    Two
  </TabPanel>
</TabSet>

The <TabSet /> component manages state, and applies additional props to the <Tab /> and <TabPanel /> components.

TabSet

Rendered as a <div /> the <TabSet /> component can contain or be contained by an valid children or parent.

A <TabSet /> has one prop, selectedTab. The value of that prop should be the same as the tab prop of a <Tab /> and its paired <TabPanel />.

TabGroup and Tab

A <TabGroup /> contains <Tab /> components.

These are rendered as <ul/> and <li /> elements, respectively; there should be no elements between them.

A <TabGroup /> has no props.

Each <Tab /> component has one prop, tab. The value of that prop pairs with the tab prop of a <TabPanel /> component (such that when a <Tab /> is selected with a click, its paired <TabPanel /> is rendered).

TabPanel

A <TabPanel /> is a container for content.

Content can be declared either as children or as the return of a function assigned to its prop render.

If your component extends PureComponent or is presentational, you might prefer to declare content as children.

Otherwise, you can assign a function to the render prop, so that rendering is deferred until the tab is selected.

Content as children

  <TabPanel tab='identifier'>
    <div className='content'>
      Content
    </div>
  </TabPanel>

Content as return

  <TabPanel tab='identifier' render={() => (
    <div className='content'>
      Content
    </div>
  )} />

(Notice that in this case there is no closing tag; if there were, children would be ignored in favour of the return from the function, anyway.)

Presentational elements

A <TabPanel /> component can contain or be contained by an valid children or parent, just like a <TabSet />.

<TabSet selectedTab='one'>
  { /*
    Etc.
  */ }
  <div className='a'>
    <div className='b'>
      <div className='c'>
        <TabPanel tab='one'>
          One
        </TabPanel>
      </div>
    </div>
  </div>
  <TabPanel tab='two' render={() => {
    return 'Two'
  }} />
</TabSet>

Similarly, they can be declared in any combination.

Demonstrating react-tab-set

Example Storybooks are available.

Clone the repository, then:

npm install
npm run storybook

And with your preferred browser visit http://localhost:6006.

debuguuid
@everything-registry/sub-chunk-2616@zalastax/nolb-react-ta
2.1.2

8 months ago

2.1.1

8 months ago

2.1.4

8 months ago

2.1.3

8 months ago

2.1.6

8 months ago

2.1.5

8 months ago

2.1.8

8 months ago

2.1.7

8 months ago

2.1.0

8 months ago

2.1.16

7 months ago

2.1.17

7 months ago

2.1.14

7 months ago

2.1.15

7 months ago

2.1.12

7 months ago

2.1.13

7 months ago

2.1.10

8 months ago

2.1.11

7 months ago

2.1.18

6 months ago

2.1.19

5 months ago

2.1.27

5 months ago

2.1.28

5 months ago

2.1.25

5 months ago

2.1.26

5 months ago

2.1.23

5 months ago

2.1.24

5 months ago

2.1.21

5 months ago

2.1.22

5 months ago

2.1.20

5 months ago

2.1.29

5 months ago

2.1.38

5 months ago

2.1.39

5 months ago

2.1.36

5 months ago

2.1.37

5 months ago

2.1.34

5 months ago

2.1.35

5 months ago

2.1.32

5 months ago

2.1.33

5 months ago

2.1.30

5 months ago

2.1.31

5 months ago

2.1.40

5 months ago

2.1.9

8 months ago

2.0.209

8 months ago

2.0.208

9 months ago

2.0.213

8 months ago

2.0.212

8 months ago

2.0.211

8 months ago

2.0.210

8 months ago

2.0.207

9 months ago

2.0.206

9 months ago

2.0.205

9 months ago

2.0.204

9 months ago

2.0.203

9 months ago

2.0.202

9 months ago

2.0.201

9 months ago

2.0.200

9 months ago

2.0.199

9 months ago

2.0.198

9 months ago

2.0.197

9 months ago

2.0.196

9 months ago

2.0.195

9 months ago

2.0.194

9 months ago

2.0.191

10 months ago

2.0.190

10 months ago

2.0.193

10 months ago

2.0.192

10 months ago

2.0.179

11 months ago

2.0.178

11 months ago

2.0.177

11 months ago

2.0.176

11 months ago

2.0.175

11 months ago

2.0.174

11 months ago

2.0.173

11 months ago

2.0.172

11 months ago

2.0.171

11 months ago

2.0.170

11 months ago

2.0.180

11 months ago

2.0.189

10 months ago

2.0.188

10 months ago

2.0.187

10 months ago

2.0.186

10 months ago

2.0.185

11 months ago

2.0.184

11 months ago

2.0.183

11 months ago

2.0.182

11 months ago

2.0.181

11 months ago

2.0.169

11 months ago

2.0.168

11 months ago

2.0.167

11 months ago

2.0.166

11 months ago

2.0.165

11 months ago

2.0.164

11 months ago

2.0.163

11 months ago

2.0.159

11 months ago

2.0.158

12 months ago

2.0.157

12 months ago

2.0.156

12 months ago

2.0.155

12 months ago

2.0.154

12 months ago

2.0.153

12 months ago

2.0.152

12 months ago

2.0.151

12 months ago

2.0.150

12 months ago

2.0.162

11 months ago

2.0.161

11 months ago

2.0.160

11 months ago

2.0.139

1 year ago

2.0.138

1 year ago

2.0.137

1 year ago

2.0.136

1 year ago

2.0.135

1 year ago

2.0.134

1 year ago

2.0.133

1 year ago

2.0.132

1 year ago

2.0.131

1 year ago

2.0.130

1 year ago

2.0.149

12 months ago

2.0.148

12 months ago

2.0.147

12 months ago

2.0.146

12 months ago

2.0.145

12 months ago

2.0.144

12 months ago

2.0.143

12 months ago

2.0.142

12 months ago

2.0.141

12 months ago

2.0.140

12 months ago

2.0.119

1 year ago

2.0.118

1 year ago

2.0.117

1 year ago

2.0.116

1 year ago

2.0.115

1 year ago

2.0.114

1 year ago

2.0.113

1 year ago

2.0.112

1 year ago

2.0.111

1 year ago

2.0.129

1 year ago

2.0.128

1 year ago

2.0.127

1 year ago

2.0.126

1 year ago

2.0.125

1 year ago

2.0.124

1 year ago

2.0.123

1 year ago

2.0.122

1 year ago

2.0.121

1 year ago

2.0.120

1 year ago

2.0.110

1 year ago

2.0.109

1 year ago

2.0.108

1 year ago

2.0.107

1 year ago

2.0.106

1 year ago

2.0.105

1 year ago

2.0.104

1 year ago

2.0.103

1 year ago

2.0.102

1 year ago

2.0.101

1 year ago

2.0.100

1 year ago

2.0.99

1 year ago

2.0.97

1 year ago

2.0.98

1 year ago

2.0.96

1 year ago

2.0.95

1 year ago

2.0.94

1 year ago

2.0.93

1 year ago

2.0.92

1 year ago

2.0.91

1 year ago

2.0.90

1 year ago

2.0.88

1 year ago

2.0.89

1 year ago

2.0.87

1 year ago

2.0.86

1 year ago

2.0.85

1 year ago

2.0.84

1 year ago

2.0.83

1 year ago

2.0.82

1 year ago

2.0.81

1 year ago

2.0.80

1 year ago

2.0.79

1 year ago

2.0.77

1 year ago

2.0.78

1 year ago

2.0.75

1 year ago

2.0.76

1 year ago

2.0.74

1 year ago

2.0.73

1 year ago

2.0.72

1 year ago

2.0.71

1 year ago

2.0.65

1 year ago

2.0.64

1 year ago

2.0.63

1 year ago

2.0.62

1 year ago

2.0.61

1 year ago

2.0.59

1 year ago

2.0.60

1 year ago

2.0.58

2 years ago

2.0.57

2 years ago

2.0.55

2 years ago

2.0.56

2 years ago

2.0.54

2 years ago

2.0.53

2 years ago

2.0.51

2 years ago

2.0.52

2 years ago

2.0.50

2 years ago

2.0.49

2 years ago

2.0.48

2 years ago

2.0.47

2 years ago

2.0.46

2 years ago

2.0.44

2 years ago

2.0.45

2 years ago

2.0.15

2 years ago

2.0.16

2 years ago

2.0.13

2 years ago

2.0.14

2 years ago

2.0.11

2 years ago

2.0.12

2 years ago

2.0.10

2 years ago

2.0.19

2 years ago

2.0.17

2 years ago

2.0.18

2 years ago

2.0.26

2 years ago

2.0.27

2 years ago

2.0.24

2 years ago

2.0.25

2 years ago

2.0.22

2 years ago

2.0.23

2 years ago

2.0.20

2 years ago

2.0.21

2 years ago

2.0.28

2 years ago

2.0.29

2 years ago

2.0.37

2 years ago

2.0.38

2 years ago

2.0.35

2 years ago

2.0.36

2 years ago

2.0.33

2 years ago

2.0.34

2 years ago

2.0.31

2 years ago

2.0.32

2 years ago

2.0.30

2 years ago

2.0.39

2 years ago

2.0.42

2 years ago

2.0.43

2 years ago

2.0.40

2 years ago

2.0.41

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.9

2 years ago

2.0.8

2 years ago

1.1.441

2 years ago

1.1.440

2 years ago

1.2.0

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.1.419

2 years ago

1.1.418

2 years ago

1.1.417

2 years ago

1.1.427

2 years ago

1.1.426

2 years ago

1.1.425

2 years ago

1.1.424

2 years ago

1.1.423

2 years ago

1.1.422

2 years ago

1.1.421

2 years ago

1.1.420

2 years ago

1.1.409

2 years ago

1.1.408

2 years ago

1.1.407

2 years ago

1.1.406

2 years ago

1.1.416

2 years ago

1.1.415

2 years ago

1.1.414

2 years ago

1.1.413

2 years ago

1.1.412

2 years ago

1.1.411

2 years ago

1.1.410

2 years ago

1.1.439

2 years ago

1.1.429

2 years ago

1.1.428

2 years ago

1.1.430

2 years ago

1.1.438

2 years ago

1.1.437

2 years ago

1.1.436

2 years ago

1.1.435

2 years ago

1.1.434

2 years ago

1.1.433

2 years ago

1.1.432

2 years ago

1.1.431

2 years ago

1.1.389

2 years ago

1.1.388

2 years ago

1.1.397

2 years ago

1.1.396

2 years ago

1.1.395

2 years ago

1.1.394

2 years ago

1.1.393

2 years ago

1.1.392

2 years ago

1.1.391

2 years ago

1.1.390

2 years ago

1.1.399

2 years ago

1.1.398

2 years ago

1.1.405

2 years ago

1.1.404

2 years ago

1.1.403

2 years ago

1.1.402

2 years ago

1.1.401

2 years ago

1.1.400

2 years ago

1.1.342

2 years ago

1.1.341

2 years ago

1.1.340

2 years ago

1.1.348

2 years ago

1.1.347

2 years ago

1.1.346

2 years ago

1.1.345

2 years ago

1.1.344

2 years ago

1.1.343

2 years ago

1.1.329

2 years ago

1.1.331

2 years ago

1.1.330

2 years ago

1.1.339

2 years ago

1.1.338

2 years ago

1.1.337

2 years ago

1.1.336

2 years ago

1.1.335

2 years ago

1.1.334

2 years ago

1.1.333

2 years ago

1.1.332

2 years ago

1.1.364

2 years ago

1.1.360

2 years ago

1.1.369

2 years ago

1.1.368

2 years ago

1.1.367

2 years ago

1.1.366

2 years ago

1.1.365

2 years ago

1.1.353

2 years ago

1.1.352

2 years ago

1.1.351

2 years ago

1.1.350

2 years ago

1.1.359

2 years ago

1.1.358

2 years ago

1.1.357

2 years ago

1.1.356

2 years ago

1.1.355

2 years ago

1.1.354

2 years ago

1.1.306

2 years ago

1.1.305

2 years ago

1.1.304

2 years ago

1.1.303

2 years ago

1.1.302

2 years ago

1.1.301

2 years ago

1.1.300

2 years ago

1.1.319

2 years ago

1.1.318

2 years ago

1.1.320

2 years ago

1.1.328

2 years ago

1.1.327

2 years ago

1.1.326

2 years ago

1.1.325

2 years ago

1.1.324

2 years ago

1.1.323

2 years ago

1.1.322

2 years ago

1.1.321

2 years ago

1.1.309

2 years ago

1.1.308

2 years ago

1.1.307

2 years ago

1.1.317

2 years ago

1.1.316

2 years ago

1.1.315

2 years ago

1.1.314

2 years ago

1.1.313

2 years ago

1.1.312

2 years ago

1.1.311

2 years ago

1.1.310

2 years ago

1.1.290

2 years ago

1.1.298

2 years ago

1.1.297

2 years ago

1.1.296

2 years ago

1.1.295

2 years ago

1.1.294

2 years ago

1.1.293

2 years ago

1.1.292

2 years ago

1.1.291

2 years ago

1.1.299

2 years ago

1.1.386

2 years ago

1.1.385

2 years ago

1.1.384

2 years ago

1.1.383

2 years ago

1.1.382

2 years ago

1.1.381

2 years ago

1.1.380

2 years ago

1.1.387

2 years ago

1.1.375

2 years ago

1.1.374

2 years ago

1.1.373

2 years ago

1.1.372

2 years ago

1.1.371

2 years ago

1.1.370

2 years ago

1.1.379

2 years ago

1.1.378

2 years ago

1.1.377

2 years ago

1.1.376

2 years ago

1.1.287

2 years ago

1.1.286

3 years ago

1.1.285

3 years ago

1.1.284

3 years ago

1.1.283

3 years ago

1.1.282

3 years ago

1.1.281

3 years ago

1.1.280

3 years ago

1.1.289

2 years ago

1.1.288

2 years ago

1.1.276

3 years ago

1.1.275

3 years ago

1.1.274

3 years ago

1.1.273

3 years ago

1.1.272

3 years ago

1.1.279

3 years ago

1.1.278

3 years ago

1.1.277

3 years ago

1.1.219

3 years ago

1.1.221

3 years ago

1.1.220

3 years ago

1.1.229

3 years ago

1.1.228

3 years ago

1.1.227

3 years ago

1.1.226

3 years ago

1.1.225

3 years ago

1.1.224

3 years ago

1.1.223

3 years ago

1.1.222

3 years ago

1.1.210

3 years ago

1.1.218

3 years ago

1.1.217

3 years ago

1.1.216

3 years ago

1.1.215

3 years ago

1.1.214

3 years ago

1.1.213

3 years ago

1.1.212

3 years ago

1.1.211

3 years ago

1.1.243

3 years ago

1.1.242

3 years ago

1.1.241

3 years ago

1.1.240

3 years ago

1.1.249

3 years ago

1.1.248

3 years ago

1.1.247

3 years ago

1.1.246

3 years ago

1.1.245

3 years ago

1.1.244

3 years ago

1.1.232

3 years ago

1.1.231

3 years ago

1.1.230

3 years ago

1.1.239

3 years ago

1.1.238

3 years ago

1.1.237

3 years ago

1.1.236

3 years ago

1.1.235

3 years ago

1.1.234

3 years ago

1.1.233

3 years ago

1.1.265

3 years ago

1.1.264

3 years ago

1.1.263

3 years ago

1.1.262

3 years ago

1.1.261

3 years ago

1.1.260

3 years ago

1.1.269

3 years ago

1.1.268

3 years ago

1.1.267

3 years ago

1.1.266

3 years ago

1.1.254

3 years ago

1.1.253

3 years ago

1.1.252

3 years ago

1.1.251

3 years ago

1.1.250

3 years ago

1.1.259

3 years ago

1.1.258

3 years ago

1.1.257

3 years ago

1.1.256

3 years ago

1.1.255

3 years ago

1.1.271

3 years ago

1.1.270

3 years ago

1.1.209

3 years ago

1.1.208

3 years ago

1.1.207

3 years ago

1.1.206

3 years ago

1.1.205

3 years ago

1.1.204

3 years ago

1.1.203

3 years ago

1.1.202

3 years ago

1.1.201

3 years ago

1.1.200

3 years ago

1.1.199

3 years ago

1.1.198

3 years ago

1.1.180

3 years ago

1.1.188

3 years ago

1.1.187

3 years ago

1.1.186

3 years ago

1.1.185

3 years ago

1.1.184

3 years ago

1.1.183

3 years ago

1.1.182

3 years ago

1.1.181

3 years ago

1.1.189

3 years ago

1.1.177

3 years ago

1.1.176

3 years ago

1.1.175

3 years ago

1.1.174

3 years ago

1.1.173

3 years ago

1.1.172

3 years ago

1.1.171

3 years ago

1.1.170

3 years ago

1.1.179

3 years ago

1.1.178

3 years ago

1.1.191

3 years ago

1.1.190

3 years ago

1.1.197

3 years ago

1.1.196

3 years ago

1.1.195

3 years ago

1.1.194

3 years ago

1.1.193

3 years ago

1.1.192

3 years ago

1.1.169

3 years ago

1.1.168

3 years ago

1.1.166

3 years ago

1.1.165

3 years ago

1.1.164

3 years ago

1.1.167

3 years ago

1.1.129

3 years ago

1.1.144

3 years ago

1.1.143

3 years ago

1.1.142

3 years ago

1.1.141

3 years ago

1.1.140

3 years ago

1.1.149

3 years ago

1.1.148

3 years ago

1.1.147

3 years ago

1.1.146

3 years ago

1.1.145

3 years ago

1.1.133

3 years ago

1.1.132

3 years ago

1.1.131

3 years ago

1.1.130

3 years ago

1.1.139

3 years ago

1.1.138

3 years ago

1.1.137

3 years ago

1.1.136

3 years ago

1.1.135

3 years ago

1.1.134

3 years ago

1.1.163

3 years ago

1.1.162

3 years ago

1.1.161

3 years ago

1.1.160

3 years ago

1.1.155

3 years ago

1.1.154

3 years ago

1.1.153

3 years ago

1.1.152

3 years ago

1.1.151

3 years ago

1.1.150

3 years ago

1.1.159

3 years ago

1.1.158

3 years ago

1.1.157

3 years ago

1.1.156

3 years ago

1.1.128

3 years ago

1.1.127

3 years ago

1.1.126

3 years ago

1.1.125

3 years ago

1.1.124

3 years ago

1.1.100

4 years ago

1.1.108

4 years ago

1.1.107

4 years ago

1.1.106

4 years ago

1.1.105

4 years ago

1.1.104

4 years ago

1.1.103

4 years ago

1.1.102

4 years ago

1.1.101

4 years ago

1.1.122

3 years ago

1.1.92

4 years ago

1.1.121

3 years ago

1.1.91

4 years ago

1.1.120

3 years ago

1.1.90

4 years ago

1.1.96

4 years ago

1.1.95

4 years ago

1.1.94

4 years ago

1.1.93

4 years ago

1.1.99

4 years ago

1.1.98

4 years ago

1.1.97

4 years ago

1.1.123

3 years ago

1.1.109

3 years ago

1.1.111

3 years ago

1.1.110

3 years ago

1.1.119

3 years ago

1.1.118

3 years ago

1.1.117

3 years ago

1.1.116

3 years ago

1.1.115

3 years ago

1.1.114

3 years ago

1.1.113

3 years ago

1.1.112

3 years ago

1.1.70

4 years ago

1.1.74

4 years ago

1.1.73

4 years ago

1.1.72

4 years ago

1.1.71

4 years ago

1.1.78

4 years ago

1.1.76

4 years ago

1.1.75

4 years ago

1.1.79

4 years ago

1.1.81

4 years ago

1.1.80

4 years ago

1.1.85

4 years ago

1.1.84

4 years ago

1.1.83

4 years ago

1.1.82

4 years ago

1.1.89

4 years ago

1.1.88

4 years ago

1.1.87

4 years ago

1.1.86

4 years ago

1.1.63

4 years ago

1.1.62

4 years ago

1.1.67

4 years ago

1.1.66

4 years ago

1.1.65

4 years ago

1.1.64

4 years ago

1.1.69

4 years ago

1.1.68

4 years ago

1.1.41

4 years ago

1.1.40

4 years ago

1.1.45

4 years ago

1.1.44

4 years ago

1.1.43

4 years ago

1.1.42

4 years ago

1.1.49

4 years ago

1.1.48

4 years ago

1.1.47

4 years ago

1.1.46

4 years ago

1.1.52

4 years ago

1.1.51

4 years ago

1.1.50

4 years ago

1.1.56

4 years ago

1.1.55

4 years ago

1.1.54

4 years ago

1.1.53

4 years ago

1.1.59

4 years ago

1.1.58

4 years ago

1.1.57

4 years ago

1.1.61

4 years ago

1.1.60

4 years ago

1.1.30

4 years ago

1.1.34

4 years ago

1.1.33

4 years ago

1.1.32

4 years ago

1.1.31

4 years ago

1.1.38

4 years ago

1.1.37

4 years ago

1.1.36

4 years ago

1.1.35

4 years ago

1.1.39

4 years ago

1.1.29

4 years ago

1.1.28

4 years ago

1.1.27

4 years ago

1.1.26

4 years ago

1.1.25

4 years ago

1.1.24

4 years ago

1.1.12

4 years ago

1.1.11

4 years ago

1.1.16

4 years ago

1.1.15

4 years ago

1.1.14

4 years ago

1.1.13

4 years ago

1.1.19

4 years ago

1.1.18

4 years ago

1.1.17

4 years ago

1.1.23

4 years ago

1.1.22

4 years ago

1.1.21

4 years ago

1.1.20

4 years ago

1.1.9

4 years ago

1.1.10

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

0.0.9

8 years ago

0.0.8

8 years ago

0.0.7

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago