2.1.40 • Published 3 months ago

react-tab-set v2.1.40

Weekly downloads
5
License
ISC
Repository
github
Last release
3 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

6 months ago

2.1.1

6 months ago

2.1.4

6 months ago

2.1.3

6 months ago

2.1.6

6 months ago

2.1.5

6 months ago

2.1.8

6 months ago

2.1.7

6 months ago

2.1.0

6 months ago

2.1.16

5 months ago

2.1.17

5 months ago

2.1.14

5 months ago

2.1.15

5 months ago

2.1.12

5 months ago

2.1.13

5 months ago

2.1.10

6 months ago

2.1.11

5 months ago

2.1.18

5 months ago

2.1.19

4 months ago

2.1.27

4 months ago

2.1.28

4 months ago

2.1.25

4 months ago

2.1.26

4 months ago

2.1.23

4 months ago

2.1.24

4 months ago

2.1.21

4 months ago

2.1.22

4 months ago

2.1.20

4 months ago

2.1.29

4 months ago

2.1.38

3 months ago

2.1.39

3 months ago

2.1.36

3 months ago

2.1.37

3 months ago

2.1.34

3 months ago

2.1.35

3 months ago

2.1.32

3 months ago

2.1.33

3 months ago

2.1.30

3 months ago

2.1.31

3 months ago

2.1.40

3 months ago

2.1.9

6 months ago

2.0.209

7 months ago

2.0.208

7 months ago

2.0.213

6 months ago

2.0.212

7 months ago

2.0.211

7 months ago

2.0.210

7 months ago

2.0.207

7 months ago

2.0.206

7 months ago

2.0.205

7 months ago

2.0.204

7 months ago

2.0.203

7 months ago

2.0.202

7 months ago

2.0.201

7 months ago

2.0.200

7 months ago

2.0.199

8 months ago

2.0.198

8 months ago

2.0.197

8 months ago

2.0.196

8 months ago

2.0.195

8 months ago

2.0.194

8 months ago

2.0.191

8 months ago

2.0.190

8 months ago

2.0.193

8 months ago

2.0.192

8 months ago

2.0.179

9 months ago

2.0.178

9 months ago

2.0.177

9 months ago

2.0.176

9 months ago

2.0.175

9 months ago

2.0.174

9 months ago

2.0.173

9 months ago

2.0.172

9 months ago

2.0.171

9 months ago

2.0.170

9 months ago

2.0.180

9 months ago

2.0.189

9 months ago

2.0.188

9 months ago

2.0.187

9 months ago

2.0.186

9 months ago

2.0.185

9 months ago

2.0.184

9 months ago

2.0.183

9 months ago

2.0.182

9 months ago

2.0.181

9 months ago

2.0.169

9 months ago

2.0.168

9 months ago

2.0.167

10 months ago

2.0.166

10 months ago

2.0.165

10 months ago

2.0.164

10 months ago

2.0.163

10 months ago

2.0.159

10 months ago

2.0.158

10 months ago

2.0.157

10 months ago

2.0.156

10 months ago

2.0.155

10 months ago

2.0.154

10 months ago

2.0.153

10 months ago

2.0.152

10 months ago

2.0.151

10 months ago

2.0.150

10 months ago

2.0.162

10 months ago

2.0.161

10 months ago

2.0.160

10 months ago

2.0.139

11 months ago

2.0.138

11 months ago

2.0.137

11 months ago

2.0.136

11 months ago

2.0.135

11 months ago

2.0.134

11 months ago

2.0.133

11 months ago

2.0.132

11 months ago

2.0.131

11 months ago

2.0.130

11 months ago

2.0.149

10 months ago

2.0.148

10 months ago

2.0.147

10 months ago

2.0.146

10 months ago

2.0.145

10 months ago

2.0.144

10 months ago

2.0.143

10 months ago

2.0.142

10 months ago

2.0.141

10 months ago

2.0.140

10 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

11 months ago

2.0.128

11 months ago

2.0.127

11 months ago

2.0.126

11 months ago

2.0.125

11 months ago

2.0.124

12 months ago

2.0.123

12 months 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

1 year ago

2.0.57

1 year ago

2.0.55

1 year ago

2.0.56

1 year ago

2.0.54

1 year ago

2.0.53

1 year ago

2.0.51

1 year ago

2.0.52

1 year ago

2.0.50

1 year ago

2.0.49

1 year ago

2.0.48

1 year ago

2.0.47

1 year ago

2.0.46

1 year 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

2 years ago

1.1.285

2 years ago

1.1.284

2 years ago

1.1.283

2 years ago

1.1.282

2 years ago

1.1.281

2 years ago

1.1.280

2 years ago

1.1.289

2 years ago

1.1.288

2 years ago

1.1.276

2 years ago

1.1.275

2 years ago

1.1.274

2 years ago

1.1.273

2 years ago

1.1.272

2 years ago

1.1.279

2 years ago

1.1.278

2 years ago

1.1.277

2 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

2 years ago

1.1.264

2 years ago

1.1.263

2 years ago

1.1.262

2 years ago

1.1.261

2 years ago

1.1.260

2 years ago

1.1.269

2 years ago

1.1.268

2 years ago

1.1.267

2 years ago

1.1.266

2 years ago

1.1.254

2 years ago

1.1.253

2 years ago

1.1.252

3 years ago

1.1.251

3 years ago

1.1.250

3 years ago

1.1.259

2 years ago

1.1.258

2 years ago

1.1.257

2 years ago

1.1.256

2 years ago

1.1.255

2 years ago

1.1.271

2 years ago

1.1.270

2 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

3 years ago

1.1.108

3 years ago

1.1.107

3 years ago

1.1.106

3 years ago

1.1.105

3 years ago

1.1.104

3 years ago

1.1.103

3 years ago

1.1.102

3 years ago

1.1.101

3 years ago

1.1.122

3 years ago

1.1.92

3 years ago

1.1.121

3 years ago

1.1.91

3 years ago

1.1.120

3 years ago

1.1.90

3 years ago

1.1.96

3 years ago

1.1.95

3 years ago

1.1.94

3 years ago

1.1.93

3 years ago

1.1.99

3 years ago

1.1.98

3 years ago

1.1.97

3 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

3 years ago

1.1.73

3 years ago

1.1.72

3 years ago

1.1.71

4 years ago

1.1.78

3 years ago

1.1.76

3 years ago

1.1.75

3 years ago

1.1.79

3 years ago

1.1.81

3 years ago

1.1.80

3 years ago

1.1.85

3 years ago

1.1.84

3 years ago

1.1.83

3 years ago

1.1.82

3 years ago

1.1.89

3 years ago

1.1.88

3 years ago

1.1.87

3 years ago

1.1.86

3 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

5 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