2.0.106 • Published 4 days ago

react-tab-set v2.0.106

Weekly downloads
5
License
MIT
Repository
github
Last release
4 days 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.0.106

4 days ago

2.0.105

10 days ago

2.0.104

13 days ago

2.0.103

14 days ago

2.0.102

17 days ago

2.0.101

23 days ago

2.0.100

24 days ago

2.0.99

26 days ago

2.0.97

29 days ago

2.0.98

28 days ago

2.0.96

1 month ago

2.0.95

1 month ago

2.0.94

1 month ago

2.0.93

1 month ago

2.0.92

1 month ago

2.0.91

1 month ago

2.0.90

2 months ago

2.0.88

2 months ago

2.0.89

2 months ago

2.0.87

2 months ago

2.0.86

2 months ago

2.0.85

2 months ago

2.0.84

2 months ago

2.0.83

2 months ago

2.0.82

2 months ago

2.0.81

2 months ago

2.0.80

2 months ago

2.0.79

2 months ago

2.0.77

2 months ago

2.0.78

2 months ago

2.0.75

2 months ago

2.0.76

2 months ago

2.0.74

3 months ago

2.0.73

3 months ago

2.0.72

3 months ago

2.0.71

3 months ago

2.0.65

3 months ago

2.0.64

3 months ago

2.0.63

3 months ago

2.0.62

3 months ago

2.0.61

3 months ago

2.0.59

3 months ago

2.0.60

3 months ago

2.0.58

3 months ago

2.0.57

3 months ago

2.0.55

4 months ago

2.0.56

4 months ago

2.0.54

4 months ago

2.0.53

4 months ago

2.0.51

4 months ago

2.0.52

4 months ago

2.0.50

4 months ago

2.0.49

4 months ago

2.0.48

4 months ago

2.0.47

4 months ago

2.0.46

4 months ago

2.0.44

5 months ago

2.0.45

5 months ago

2.0.15

7 months ago

2.0.16

7 months ago

2.0.13

7 months ago

2.0.14

7 months ago

2.0.11

7 months ago

2.0.12

7 months ago

2.0.10

7 months ago

2.0.19

7 months ago

2.0.17

7 months ago

2.0.18

7 months ago

2.0.26

6 months ago

2.0.27

6 months ago

2.0.24

6 months ago

2.0.25

6 months ago

2.0.22

7 months ago

2.0.23

6 months ago

2.0.20

7 months ago

2.0.21

7 months ago

2.0.28

6 months ago

2.0.29

6 months ago

2.0.37

5 months ago

2.0.38

5 months ago

2.0.35

6 months ago

2.0.36

5 months ago

2.0.33

6 months ago

2.0.34

6 months ago

2.0.31

6 months ago

2.0.32

6 months ago

2.0.30

6 months ago

2.0.39

5 months ago

2.0.42

5 months ago

2.0.43

5 months ago

2.0.40

5 months ago

2.0.41

5 months ago

2.0.7

7 months ago

2.0.6

7 months ago

2.0.9

7 months ago

2.0.8

7 months ago

1.1.441

8 months ago

1.1.440

8 months ago

1.2.0

8 months ago

1.2.4

8 months ago

1.2.3

8 months ago

1.2.2

8 months ago

1.2.1

8 months ago

2.0.3

8 months ago

2.0.2

8 months ago

2.0.5

8 months ago

2.0.4

8 months ago

2.0.1

8 months ago

2.0.0

8 months ago

1.1.419

10 months ago

1.1.418

10 months ago

1.1.417

10 months ago

1.1.427

9 months ago

1.1.426

10 months ago

1.1.425

10 months ago

1.1.424

10 months ago

1.1.423

10 months ago

1.1.422

10 months ago

1.1.421

10 months ago

1.1.420

10 months ago

1.1.409

11 months ago

1.1.408

11 months ago

1.1.407

11 months ago

1.1.406

11 months ago

1.1.416

11 months ago

1.1.415

11 months ago

1.1.414

11 months ago

1.1.413

11 months ago

1.1.412

11 months ago

1.1.411

11 months ago

1.1.410

11 months ago

1.1.439

8 months ago

1.1.429

9 months ago

1.1.428

9 months ago

1.1.430

9 months ago

1.1.438

8 months ago

1.1.437

8 months ago

1.1.436

8 months ago

1.1.435

8 months ago

1.1.434

8 months ago

1.1.433

9 months ago

1.1.432

9 months ago

1.1.431

9 months ago

1.1.389

12 months ago

1.1.388

12 months ago

1.1.397

11 months ago

1.1.396

11 months ago

1.1.395

11 months ago

1.1.394

12 months ago

1.1.393

12 months ago

1.1.392

12 months ago

1.1.391

12 months ago

1.1.390

12 months ago

1.1.399

11 months ago

1.1.398

11 months ago

1.1.405

11 months ago

1.1.404

11 months ago

1.1.403

11 months ago

1.1.402

11 months ago

1.1.401

11 months ago

1.1.400

11 months ago

1.1.342

1 year ago

1.1.341

1 year ago

1.1.340

1 year ago

1.1.348

1 year ago

1.1.347

1 year ago

1.1.346

1 year ago

1.1.345

1 year ago

1.1.344

1 year ago

1.1.343

1 year ago

1.1.329

1 year ago

1.1.331

1 year ago

1.1.330

1 year ago

1.1.339

1 year ago

1.1.338

1 year ago

1.1.337

1 year ago

1.1.336

1 year ago

1.1.335

1 year ago

1.1.334

1 year ago

1.1.333

1 year ago

1.1.332

1 year ago

1.1.364

1 year ago

1.1.360

1 year ago

1.1.369

1 year ago

1.1.368

1 year ago

1.1.367

1 year ago

1.1.366

1 year ago

1.1.365

1 year ago

1.1.353

1 year ago

1.1.352

1 year ago

1.1.351

1 year ago

1.1.350

1 year ago

1.1.359

1 year ago

1.1.358

1 year ago

1.1.357

1 year ago

1.1.356

1 year ago

1.1.355

1 year ago

1.1.354

1 year ago

1.1.306

1 year ago

1.1.305

1 year ago

1.1.304

1 year ago

1.1.303

1 year ago

1.1.302

1 year ago

1.1.301

1 year ago

1.1.300

1 year ago

1.1.319

1 year ago

1.1.318

1 year ago

1.1.320

1 year ago

1.1.328

1 year ago

1.1.327

1 year ago

1.1.326

1 year ago

1.1.325

1 year ago

1.1.324

1 year ago

1.1.323

1 year ago

1.1.322

1 year ago

1.1.321

1 year ago

1.1.309

1 year ago

1.1.308

1 year ago

1.1.307

1 year ago

1.1.317

1 year ago

1.1.316

1 year ago

1.1.315

1 year ago

1.1.314

1 year ago

1.1.313

1 year ago

1.1.312

1 year ago

1.1.311

1 year ago

1.1.310

1 year ago

1.1.290

1 year ago

1.1.298

1 year ago

1.1.297

1 year ago

1.1.296

1 year ago

1.1.295

1 year ago

1.1.294

1 year ago

1.1.293

1 year ago

1.1.292

1 year ago

1.1.291

1 year ago

1.1.299

1 year ago

1.1.386

12 months ago

1.1.385

12 months ago

1.1.384

12 months ago

1.1.383

12 months ago

1.1.382

12 months ago

1.1.381

12 months ago

1.1.380

12 months ago

1.1.387

12 months ago

1.1.375

1 year ago

1.1.374

1 year ago

1.1.373

1 year ago

1.1.372

1 year ago

1.1.371

1 year ago

1.1.370

1 year ago

1.1.379

1 year ago

1.1.378

1 year ago

1.1.377

1 year ago

1.1.376

1 year ago

1.1.287

1 year ago

1.1.286

1 year ago

1.1.285

1 year ago

1.1.284

1 year ago

1.1.283

1 year ago

1.1.282

1 year ago

1.1.281

1 year ago

1.1.280

1 year ago

1.1.289

1 year ago

1.1.288

1 year ago

1.1.276

1 year ago

1.1.275

1 year ago

1.1.274

1 year ago

1.1.273

1 year ago

1.1.272

1 year ago

1.1.279

1 year ago

1.1.278

1 year ago

1.1.277

1 year ago

1.1.219

2 years ago

1.1.221

2 years ago

1.1.220

2 years ago

1.1.229

2 years ago

1.1.228

2 years ago

1.1.227

2 years ago

1.1.226

2 years ago

1.1.225

2 years ago

1.1.224

2 years ago

1.1.223

2 years ago

1.1.222

2 years ago

1.1.210

2 years ago

1.1.218

2 years ago

1.1.217

2 years ago

1.1.216

2 years ago

1.1.215

2 years ago

1.1.214

2 years ago

1.1.213

2 years ago

1.1.212

2 years ago

1.1.211

2 years ago

1.1.243

1 year ago

1.1.242

1 year ago

1.1.241

1 year ago

1.1.240

1 year ago

1.1.249

1 year ago

1.1.248

1 year ago

1.1.247

1 year ago

1.1.246

1 year ago

1.1.245

1 year ago

1.1.244

1 year ago

1.1.232

2 years ago

1.1.231

2 years ago

1.1.230

2 years ago

1.1.239

1 year ago

1.1.238

1 year ago

1.1.237

1 year ago

1.1.236

2 years ago

1.1.235

2 years ago

1.1.234

2 years ago

1.1.233

2 years ago

1.1.265

1 year ago

1.1.264

1 year ago

1.1.263

1 year ago

1.1.262

1 year ago

1.1.261

1 year ago

1.1.260

1 year ago

1.1.269

1 year ago

1.1.268

1 year ago

1.1.267

1 year ago

1.1.266

1 year ago

1.1.254

1 year ago

1.1.253

1 year ago

1.1.252

1 year ago

1.1.251

1 year ago

1.1.250

1 year ago

1.1.259

1 year ago

1.1.258

1 year ago

1.1.257

1 year ago

1.1.256

1 year ago

1.1.255

1 year ago

1.1.271

1 year ago

1.1.270

1 year ago

1.1.209

2 years ago

1.1.208

2 years ago

1.1.207

2 years ago

1.1.206

2 years ago

1.1.205

2 years ago

1.1.204

2 years ago

1.1.203

2 years ago

1.1.202

2 years ago

1.1.201

2 years ago

1.1.200

2 years ago

1.1.199

2 years ago

1.1.198

2 years ago

1.1.180

2 years ago

1.1.188

2 years ago

1.1.187

2 years ago

1.1.186

2 years ago

1.1.185

2 years ago

1.1.184

2 years ago

1.1.183

2 years ago

1.1.182

2 years ago

1.1.181

2 years ago

1.1.189

2 years ago

1.1.177

2 years ago

1.1.176

2 years ago

1.1.175

2 years ago

1.1.174

2 years ago

1.1.173

2 years ago

1.1.172

2 years ago

1.1.171

2 years ago

1.1.170

2 years ago

1.1.179

2 years ago

1.1.178

2 years ago

1.1.191

2 years ago

1.1.190

2 years ago

1.1.197

2 years ago

1.1.196

2 years ago

1.1.195

2 years ago

1.1.194

2 years ago

1.1.193

2 years ago

1.1.192

2 years ago

1.1.169

2 years ago

1.1.168

2 years ago

1.1.166

2 years ago

1.1.165

2 years ago

1.1.164

2 years ago

1.1.167

2 years ago

1.1.129

2 years ago

1.1.144

2 years ago

1.1.143

2 years ago

1.1.142

2 years ago

1.1.141

2 years ago

1.1.140

2 years ago

1.1.149

2 years ago

1.1.148

2 years ago

1.1.147

2 years ago

1.1.146

2 years ago

1.1.145

2 years ago

1.1.133

2 years ago

1.1.132

2 years ago

1.1.131

2 years ago

1.1.130

2 years ago

1.1.139

2 years ago

1.1.138

2 years ago

1.1.137

2 years ago

1.1.136

2 years ago

1.1.135

2 years ago

1.1.134

2 years ago

1.1.163

2 years ago

1.1.162

2 years ago

1.1.161

2 years ago

1.1.160

2 years ago

1.1.155

2 years ago

1.1.154

2 years ago

1.1.153

2 years ago

1.1.152

2 years ago

1.1.151

2 years ago

1.1.150

2 years ago

1.1.159

2 years ago

1.1.158

2 years ago

1.1.157

2 years ago

1.1.156

2 years ago

1.1.128

2 years ago

1.1.127

2 years ago

1.1.126

2 years ago

1.1.125

2 years ago

1.1.124

2 years ago

1.1.100

2 years ago

1.1.108

2 years ago

1.1.107

2 years ago

1.1.106

2 years ago

1.1.105

2 years ago

1.1.104

2 years ago

1.1.103

2 years ago

1.1.102

2 years ago

1.1.101

2 years ago

1.1.122

2 years ago

1.1.92

2 years ago

1.1.121

2 years ago

1.1.91

2 years ago

1.1.120

2 years ago

1.1.90

2 years ago

1.1.96

2 years ago

1.1.95

2 years ago

1.1.94

2 years ago

1.1.93

2 years ago

1.1.99

2 years ago

1.1.98

2 years ago

1.1.97

2 years ago

1.1.123

2 years ago

1.1.109

2 years ago

1.1.111

2 years ago

1.1.110

2 years ago

1.1.119

2 years ago

1.1.118

2 years ago

1.1.117

2 years ago

1.1.116

2 years ago

1.1.115

2 years ago

1.1.114

2 years ago

1.1.113

2 years ago

1.1.112

2 years ago

1.1.70

2 years ago

1.1.74

2 years ago

1.1.73

2 years ago

1.1.72

2 years ago

1.1.71

2 years ago

1.1.78

2 years ago

1.1.76

2 years ago

1.1.75

2 years ago

1.1.79

2 years ago

1.1.81

2 years ago

1.1.80

2 years ago

1.1.85

2 years ago

1.1.84

2 years ago

1.1.83

2 years ago

1.1.82

2 years ago

1.1.89

2 years ago

1.1.88

2 years ago

1.1.87

2 years ago

1.1.86

2 years ago

1.1.63

2 years ago

1.1.62

2 years ago

1.1.67

2 years ago

1.1.66

2 years ago

1.1.65

2 years ago

1.1.64

2 years ago

1.1.69

2 years ago

1.1.68

2 years ago

1.1.41

2 years ago

1.1.40

3 years ago

1.1.45

2 years ago

1.1.44

2 years ago

1.1.43

2 years ago

1.1.42

2 years ago

1.1.49

2 years ago

1.1.48

2 years ago

1.1.47

2 years ago

1.1.46

2 years ago

1.1.52

2 years ago

1.1.51

2 years ago

1.1.50

2 years ago

1.1.56

2 years ago

1.1.55

2 years ago

1.1.54

2 years ago

1.1.53

2 years ago

1.1.59

2 years ago

1.1.58

2 years ago

1.1.57

2 years ago

1.1.61

2 years ago

1.1.60

2 years ago

1.1.30

3 years ago

1.1.34

3 years ago

1.1.33

3 years ago

1.1.32

3 years ago

1.1.31

3 years ago

1.1.38

3 years ago

1.1.37

3 years ago

1.1.36

3 years ago

1.1.35

3 years ago

1.1.39

3 years ago

1.1.29

3 years ago

1.1.28

3 years ago

1.1.27

3 years ago

1.1.26

3 years ago

1.1.25

3 years ago

1.1.24

3 years ago

1.1.12

3 years ago

1.1.11

3 years ago

1.1.16

3 years ago

1.1.15

3 years ago

1.1.14

3 years ago

1.1.13

3 years ago

1.1.19

3 years ago

1.1.18

3 years ago

1.1.17

3 years ago

1.1.23

3 years ago

1.1.22

3 years ago

1.1.21

3 years ago

1.1.20

3 years ago

1.1.9

3 years ago

1.1.10

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago