2.1.40 • Published 4 months ago

react-tab-set v2.1.40

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

7 months ago

2.1.1

7 months ago

2.1.4

7 months ago

2.1.3

7 months ago

2.1.6

7 months ago

2.1.5

7 months ago

2.1.8

7 months ago

2.1.7

7 months ago

2.1.0

7 months ago

2.1.16

6 months ago

2.1.17

6 months ago

2.1.14

6 months ago

2.1.15

6 months ago

2.1.12

6 months ago

2.1.13

6 months ago

2.1.10

7 months ago

2.1.11

6 months ago

2.1.18

5 months ago

2.1.19

5 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

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

4 months ago

2.1.38

4 months ago

2.1.39

4 months ago

2.1.36

4 months ago

2.1.37

4 months ago

2.1.34

4 months ago

2.1.35

4 months ago

2.1.32

4 months ago

2.1.33

4 months ago

2.1.30

4 months ago

2.1.31

4 months ago

2.1.40

4 months ago

2.1.9

7 months ago

2.0.209

8 months ago

2.0.208

8 months ago

2.0.213

7 months ago

2.0.212

7 months ago

2.0.211

8 months ago

2.0.210

8 months ago

2.0.207

8 months ago

2.0.206

8 months ago

2.0.205

8 months ago

2.0.204

8 months ago

2.0.203

8 months ago

2.0.202

8 months ago

2.0.201

8 months ago

2.0.200

8 months ago

2.0.199

8 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

9 months ago

2.0.190

9 months ago

2.0.193

9 months ago

2.0.192

9 months ago

2.0.179

10 months ago

2.0.178

10 months ago

2.0.177

10 months ago

2.0.176

10 months ago

2.0.175

10 months ago

2.0.174

10 months ago

2.0.173

10 months ago

2.0.172

10 months ago

2.0.171

10 months ago

2.0.170

10 months ago

2.0.180

10 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

10 months ago

2.0.184

10 months ago

2.0.183

10 months ago

2.0.182

10 months ago

2.0.181

10 months ago

2.0.169

10 months ago

2.0.168

10 months ago

2.0.167

10 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

11 months ago

2.0.157

11 months ago

2.0.156

11 months ago

2.0.155

11 months ago

2.0.154

11 months ago

2.0.153

11 months ago

2.0.152

11 months ago

2.0.151

11 months ago

2.0.150

11 months ago

2.0.162

11 months ago

2.0.161

11 months ago

2.0.160

11 months ago

2.0.139

12 months ago

2.0.138

12 months ago

2.0.137

12 months ago

2.0.136

12 months ago

2.0.135

12 months ago

2.0.134

12 months ago

2.0.133

12 months ago

2.0.132

12 months ago

2.0.131

12 months ago

2.0.130

12 months ago

2.0.149

11 months ago

2.0.148

11 months ago

2.0.147

11 months ago

2.0.146

11 months ago

2.0.145

11 months ago

2.0.144

11 months ago

2.0.143

11 months ago

2.0.142

11 months ago

2.0.141

11 months ago

2.0.140

11 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

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

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

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

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

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

2 years ago

1.1.268

2 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

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

4 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

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