2.1.40 • Published 6 months ago

react-tab-set v2.1.40

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

10 months ago

2.1.1

10 months ago

2.1.4

10 months ago

2.1.3

10 months ago

2.1.6

10 months ago

2.1.5

10 months ago

2.1.8

10 months ago

2.1.7

10 months ago

2.1.0

10 months ago

2.1.16

8 months ago

2.1.17

8 months ago

2.1.14

8 months ago

2.1.15

8 months ago

2.1.12

9 months ago

2.1.13

8 months ago

2.1.10

10 months ago

2.1.11

9 months ago

2.1.18

8 months ago

2.1.19

7 months ago

2.1.27

7 months ago

2.1.28

7 months ago

2.1.25

7 months ago

2.1.26

7 months ago

2.1.23

7 months ago

2.1.24

7 months ago

2.1.21

7 months ago

2.1.22

7 months ago

2.1.20

7 months ago

2.1.29

7 months ago

2.1.38

7 months ago

2.1.39

6 months ago

2.1.36

7 months ago

2.1.37

7 months ago

2.1.34

7 months ago

2.1.35

7 months ago

2.1.32

7 months ago

2.1.33

7 months ago

2.1.30

7 months ago

2.1.31

7 months ago

2.1.40

6 months ago

2.1.9

10 months ago

2.0.209

10 months ago

2.0.208

10 months ago

2.0.213

10 months ago

2.0.212

10 months ago

2.0.211

10 months ago

2.0.210

10 months ago

2.0.207

10 months ago

2.0.206

10 months ago

2.0.205

11 months ago

2.0.204

11 months ago

2.0.203

11 months ago

2.0.202

11 months ago

2.0.201

11 months ago

2.0.200

11 months ago

2.0.199

11 months ago

2.0.198

11 months ago

2.0.197

11 months ago

2.0.196

11 months ago

2.0.195

11 months ago

2.0.194

11 months ago

2.0.191

12 months ago

2.0.190

12 months ago

2.0.193

11 months ago

2.0.192

12 months ago

2.0.179

1 year ago

2.0.178

1 year ago

2.0.177

1 year ago

2.0.176

1 year ago

2.0.175

1 year ago

2.0.174

1 year ago

2.0.173

1 year ago

2.0.172

1 year ago

2.0.171

1 year ago

2.0.170

1 year ago

2.0.180

1 year ago

2.0.189

12 months ago

2.0.188

12 months ago

2.0.187

12 months ago

2.0.186

12 months ago

2.0.185

1 year ago

2.0.184

1 year ago

2.0.183

1 year ago

2.0.182

1 year ago

2.0.181

1 year ago

2.0.169

1 year ago

2.0.168

1 year ago

2.0.167

1 year ago

2.0.166

1 year ago

2.0.165

1 year ago

2.0.164

1 year ago

2.0.163

1 year ago

2.0.159

1 year ago

2.0.158

1 year ago

2.0.157

1 year ago

2.0.156

1 year ago

2.0.155

1 year ago

2.0.154

1 year ago

2.0.153

1 year ago

2.0.152

1 year ago

2.0.151

1 year ago

2.0.150

1 year ago

2.0.162

1 year ago

2.0.161

1 year ago

2.0.160

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

1 year ago

2.0.148

1 year ago

2.0.147

1 year ago

2.0.146

1 year ago

2.0.145

1 year ago

2.0.144

1 year ago

2.0.143

1 year ago

2.0.142

1 year ago

2.0.141

1 year ago

2.0.140

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

2 years ago

2.0.89

2 years ago

2.0.87

2 years ago

2.0.86

2 years ago

2.0.85

2 years ago

2.0.84

2 years ago

2.0.83

2 years ago

2.0.82

2 years ago

2.0.81

2 years ago

2.0.80

2 years ago

2.0.79

2 years ago

2.0.77

2 years ago

2.0.78

2 years ago

2.0.75

2 years ago

2.0.76

2 years ago

2.0.74

2 years ago

2.0.73

2 years ago

2.0.72

2 years ago

2.0.71

2 years ago

2.0.65

2 years ago

2.0.64

2 years ago

2.0.63

2 years ago

2.0.62

2 years ago

2.0.61

2 years ago

2.0.59

2 years ago

2.0.60

2 years 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

3 years ago

1.1.331

3 years ago

1.1.330

3 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

3 years ago

1.1.334

3 years ago

1.1.333

3 years ago

1.1.332

3 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

3 years ago

1.1.305

3 years ago

1.1.304

3 years ago

1.1.303

3 years ago

1.1.302

3 years ago

1.1.301

3 years ago

1.1.300

3 years ago

1.1.319

3 years ago

1.1.318

3 years ago

1.1.320

3 years ago

1.1.328

3 years ago

1.1.327

3 years ago

1.1.326

3 years ago

1.1.325

3 years ago

1.1.324

3 years ago

1.1.323

3 years ago

1.1.322

3 years ago

1.1.321

3 years ago

1.1.309

3 years ago

1.1.308

3 years ago

1.1.307

3 years ago

1.1.317

3 years ago

1.1.316

3 years ago

1.1.315

3 years ago

1.1.314

3 years ago

1.1.313

3 years ago

1.1.312

3 years ago

1.1.311

3 years ago

1.1.310

3 years ago

1.1.290

3 years ago

1.1.298

3 years ago

1.1.297

3 years ago

1.1.296

3 years ago

1.1.295

3 years ago

1.1.294

3 years ago

1.1.293

3 years ago

1.1.292

3 years ago

1.1.291

3 years ago

1.1.299

3 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

3 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

3 years ago

1.1.288

3 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

4 years ago

1.1.144

3 years ago

1.1.143

4 years ago

1.1.142

4 years ago

1.1.141

4 years ago

1.1.140

4 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

4 years ago

1.1.132

4 years ago

1.1.131

4 years ago

1.1.130

4 years ago

1.1.139

4 years ago

1.1.138

4 years ago

1.1.137

4 years ago

1.1.136

4 years ago

1.1.135

4 years ago

1.1.134

4 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

4 years ago

1.1.127

4 years ago

1.1.126

4 years ago

1.1.125

4 years ago

1.1.124

4 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

4 years ago

1.1.92

4 years ago

1.1.121

4 years ago

1.1.91

4 years ago

1.1.120

4 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

4 years ago

1.1.109

4 years ago

1.1.111

4 years ago

1.1.110

4 years ago

1.1.119

4 years ago

1.1.118

4 years ago

1.1.117

4 years ago

1.1.116

4 years ago

1.1.115

4 years ago

1.1.114

4 years ago

1.1.113

4 years ago

1.1.112

4 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