0.0.130 • Published 1 year ago

react-semaphor v0.0.130

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

Integrating dashboard into your React app is a straightforward three-step process.

1) Install Semaphor Package

Open your terminal in your project directory and run the following command. This command installs the semaphor package and adds it to your project dependencies.

npm i semaphor

2) Get Auth Token

Before rendering the Dashboard, first acquire the AuthToken. This token enhances the security of your dashboard by restricting access to only users with the token. Make a POST fetch call as shown below.

const DASHBOARD_ID = 'd_cf007a8b-19bc-46ad-8787-2915445b7b86'; // Replace with your actual dashboard ID
const DASHBOARD_SECRET = 'ds_f32f0b30-b7e1-40f9-ba6a-9804a5b9d635'; // Replace with your actual dashboard secret
const TOKEN_URL = 'https://semaphor.cloud/api/v1/token';

async function fetchToken() {
  try {
    const response = await fetch(TOKEN_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        dashboardId: DASHBOARD_ID,
        dashboardSecret: DASHBOARD_SECRET,
      }),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const token = await response.json();
    if (token?.accessToken) {
      setAuthToken(token);
    }
  } catch (error) {
    console.error('There was an error!', error);
  }
}

3) Initialize Dashboard

Here is a simple example of a React component that demonstrates how to use the Dashboard component from the semaphor package. Make sure you import style.css either at the beginning of your component or in your global CSS file. This step is necessary for correctly loading your dashboard styles.

import { useEffect, useState } from 'react';
import { AuthToken, Dashboard } from 'semaphor';
import '../node_modules/semaphor/dist/style.css'; // IMPORTANT! Include the CSS file. This is the default style, you can customize it.

function App() {
  const [authToken, setAuthToken] = useState<AuthToken>();

  return (
    <div>
      <h2>My cool dashboard</h2>
      <Dashboard authToken={authToken} id={DASHBOARD_ID} />
    </div>
  );
}

Full Code

Here is the complete React code that uses the above steps. You can copy and paste this example into your own application.

import { useEffect, useState } from 'react';
import { AuthToken, Dashboard } from 'semaphor';
import '../node_modules/semaphor/dist/style.css'; // IMPORTANT! Include the CSS file. This is the default style, you can customize it.

const DASHBOARD_ID = 'd_cf007a8b-19bc-46ad-8787-2915445b7b86'; // Replace with your actual dashboard ID
const DASHBOARD_SECRET = 'ds_f32f0b30-b7e1-40f9-ba6a-9804a5b9d635'; // Replace with your actual dashboard secret
const TOKEN_URL = 'https://semaphor.cloud/api/v1/token';

function App() {
  const [authToken, setAuthToken] = useState<AuthToken>();

  useEffect(() => {
    async function fetchToken() {
      try {
        const response = await fetch(TOKEN_URL, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            dashboardId: DASHBOARD_ID,
            dashboardSecret: DASHBOARD_SECRET,
          }),
        });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const token = await response.json();
        if (token?.accessToken) {
          setAuthToken(token);
        }
      } catch (error) {
        console.error('There was an error!', error);
      }
    }
    fetchToken();
  }, []);

  return (
    <div>
      <h2>My cool dashboard</h2>
      <Dashboard authToken={authToken} id={DASHBOARD_ID} />
    </div>
  );
}

export default App;

Key Considerations

  • Security Note: Keep the DASHBOARD_SECRET secure and do not expose it in client-side code in production. This example is for demonstration purposes only. When deploying in production, obtain the authentication token from a secure, server-side environment.
  • Fetching the AuthToken: Before the dashboard can be displayed, an authentication token must be fetched. The useEffect hook is used to perform this action when the component mounts.
0.0.315

6 months ago

0.0.314

6 months ago

0.0.313

6 months ago

0.0.312

6 months ago

0.0.319

6 months ago

0.0.318

6 months ago

0.0.317

6 months ago

0.0.316

6 months ago

0.0.311

6 months ago

0.0.310

6 months ago

0.0.309

6 months ago

0.0.326

6 months ago

0.0.325

6 months ago

0.0.324

6 months ago

0.0.323

6 months ago

0.0.329

6 months ago

0.0.328

6 months ago

0.0.327

6 months ago

0.0.322

6 months ago

0.0.321

6 months ago

0.0.320

6 months ago

0.0.337

6 months ago

0.0.336

6 months ago

0.0.335

6 months ago

0.0.334

6 months ago

0.0.338

6 months ago

0.0.333

6 months ago

0.0.332

6 months ago

0.0.331

6 months ago

0.0.330

6 months ago

0.0.348

6 months ago

0.0.347

6 months ago

0.0.346

6 months ago

0.0.345

6 months ago

0.0.349

5 months ago

0.0.340

6 months ago

0.0.344

6 months ago

0.0.343

6 months ago

0.0.342

6 months ago

0.0.341

6 months ago

0.0.37710

5 months ago

0.0.37711

5 months ago

0.0.37714

5 months ago

0.0.37715

5 months ago

0.0.37712

5 months ago

0.0.37713

5 months ago

0.0.37718

5 months ago

0.0.37719

5 months ago

0.0.37716

5 months ago

0.0.37717

5 months ago

0.0.304

6 months ago

0.0.303

6 months ago

0.0.302

6 months ago

0.0.301

6 months ago

0.0.308

6 months ago

0.0.307

6 months ago

0.0.306

6 months ago

0.0.305

6 months ago

0.0.300

6 months ago

0.0.3791

5 months ago

0.0.3777

5 months ago

0.0.3771

5 months ago

0.0.3772

5 months ago

0.0.3773

5 months ago

0.0.3774

5 months ago

0.0.3775

5 months ago

0.0.3776

5 months ago

0.0.3931

5 months ago

0.0.3932

5 months ago

0.0.279

9 months ago

0.0.395

5 months ago

0.0.274

9 months ago

0.0.394

5 months ago

0.0.273

9 months ago

0.0.393

5 months ago

0.0.272

9 months ago

0.0.392

5 months ago

0.0.271

9 months ago

0.0.278

9 months ago

0.0.277

9 months ago

0.0.397

4 months ago

0.0.276

9 months ago

0.0.396

5 months ago

0.0.275

9 months ago

0.0.391

5 months ago

0.0.270

9 months ago

0.0.390

5 months ago

0.0.285

8 months ago

0.0.284

8 months ago

0.0.283

8 months ago

0.0.282

8 months ago

0.0.289

8 months ago

0.0.288

8 months ago

0.0.287

8 months ago

0.0.286

8 months ago

0.0.281

9 months ago

0.0.280

9 months ago

0.0.296

7 months ago

0.0.295

7 months ago

0.0.294

7 months ago

0.0.293

7 months ago

0.0.299

6 months ago

0.0.298

6 months ago

0.0.297

6 months ago

0.0.292

7 months ago

0.0.291

7 months ago

0.0.290

7 months ago

0.0.359

5 months ago

0.0.358

5 months ago

0.0.357

5 months ago

0.0.356

5 months ago

0.0.351

5 months ago

0.0.350

5 months ago

0.0.355

5 months ago

0.0.354

5 months ago

0.0.353

5 months ago

0.0.352

5 months ago

0.0.369

5 months ago

0.0.368

5 months ago

0.0.367

5 months ago

0.0.362

5 months ago

0.0.361

5 months ago

0.0.360

5 months ago

0.0.366

5 months ago

0.0.365

5 months ago

0.0.364

5 months ago

0.0.363

5 months ago

0.0.379

5 months ago

0.0.378

5 months ago

0.0.373

5 months ago

0.0.372

5 months ago

0.0.371

5 months ago

0.0.370

5 months ago

0.0.377

5 months ago

0.0.376

5 months ago

0.0.375

5 months ago

0.0.269

9 months ago

0.0.389

5 months ago

0.0.268

9 months ago

0.0.384

5 months ago

0.0.263

9 months ago

0.0.383

5 months ago

0.0.262

9 months ago

0.0.382

5 months ago

0.0.261

9 months ago

0.0.381

5 months ago

0.0.388

5 months ago

0.0.267

9 months ago

0.0.387

5 months ago

0.0.266

9 months ago

0.0.386

5 months ago

0.0.265

9 months ago

0.0.385

5 months ago

0.0.264

9 months ago

0.0.380

5 months ago

0.0.249

9 months ago

0.0.248

9 months ago

0.0.247

9 months ago

0.0.259

9 months ago

0.0.258

9 months ago

0.0.257

9 months ago

0.0.252

9 months ago

0.0.251

9 months ago

0.0.250

9 months ago

0.0.256

9 months ago

0.0.255

9 months ago

0.0.254

9 months ago

0.0.253

9 months ago

0.0.260

9 months ago

0.0.246

9 months ago

0.0.205

11 months ago

0.0.204

11 months ago

0.0.203

11 months ago

0.0.202

11 months ago

0.0.209

11 months ago

0.0.208

11 months ago

0.0.207

11 months ago

0.0.206

11 months ago

0.0.201

11 months ago

0.0.200

11 months ago

0.0.216

10 months ago

0.0.215

10 months ago

0.0.214

10 months ago

0.0.213

10 months ago

0.0.219

10 months ago

0.0.218

10 months ago

0.0.217

10 months ago

0.0.212

10 months ago

0.0.211

10 months ago

0.0.210

10 months ago

0.0.227

10 months ago

0.0.226

10 months ago

0.0.225

10 months ago

0.0.224

10 months ago

0.0.229

10 months ago

0.0.228

10 months ago

0.0.223

10 months ago

0.0.222

10 months ago

0.0.221

10 months ago

0.0.220

10 months ago

0.0.197

11 months ago

0.0.196

11 months ago

0.0.195

11 months ago

0.0.194

11 months ago

0.0.199

11 months ago

0.0.198

11 months ago

0.0.193

11 months ago

0.0.192

11 months ago

0.0.191

11 months ago

0.0.190

11 months ago

0.0.186

11 months ago

0.0.185

11 months ago

0.0.184

11 months ago

0.0.189

11 months ago

0.0.188

11 months ago

0.0.187

11 months ago

0.0.238

10 months ago

0.0.237

10 months ago

0.0.236

10 months ago

0.0.235

10 months ago

0.0.239

10 months ago

0.0.230

10 months ago

0.0.234

10 months ago

0.0.233

10 months ago

0.0.232

10 months ago

0.0.231

10 months ago

0.0.241

10 months ago

0.0.240

10 months ago

0.0.245

9 months ago

0.0.244

9 months ago

0.0.243

9 months ago

0.0.242

9 months ago

0.0.159

1 year ago

0.0.158

1 year ago

0.0.153

1 year ago

0.0.152

1 year ago

0.0.151

1 year ago

0.0.150

1 year ago

0.0.157

1 year ago

0.0.156

1 year ago

0.0.155

1 year ago

0.0.154

1 year ago

0.0.169

12 months ago

0.0.164

1 year ago

0.0.163

1 year ago

0.0.162

1 year ago

0.0.161

1 year ago

0.0.168

12 months ago

0.0.167

1 year ago

0.0.166

1 year ago

0.0.165

1 year ago

0.0.160

1 year ago

0.0.175

12 months ago

0.0.174

12 months ago

0.0.173

12 months ago

0.0.172

12 months ago

0.0.179

12 months ago

0.0.178

12 months ago

0.0.177

12 months ago

0.0.176

12 months ago

0.0.171

12 months ago

0.0.170

12 months ago

0.0.106

1 year ago

0.0.105

1 year ago

0.0.104

1 year ago

0.0.103

1 year ago

0.0.109

1 year ago

0.0.108

1 year ago

0.0.107

1 year ago

0.0.183

11 months ago

0.0.102

1 year ago

0.0.101

1 year ago

0.0.182

11 months ago

0.0.181

12 months ago

0.0.180

12 months ago

0.0.117

1 year ago

0.0.116

1 year ago

0.0.115

1 year ago

0.0.114

1 year ago

0.0.119

1 year ago

0.0.118

1 year ago

0.0.113

1 year ago

0.0.112

1 year ago

0.0.111

1 year ago

0.0.110

1 year ago

0.0.128

1 year ago

0.0.127

1 year ago

0.0.126

1 year ago

0.0.125

1 year ago

0.0.129

1 year ago

0.0.120

1 year ago

0.0.124

1 year ago

0.0.123

1 year ago

0.0.122

1 year ago

0.0.121

1 year ago

0.0.139

1 year ago

0.0.138

1 year ago

0.0.137

1 year ago

0.0.136

1 year ago

0.0.131

1 year ago

0.0.130

1 year ago

0.0.135

1 year ago

0.0.134

1 year ago

0.0.133

1 year ago

0.0.132

1 year ago

0.0.149

1 year ago

0.0.96

1 year ago

0.0.148

1 year ago

0.0.97

1 year ago

0.0.147

1 year ago

0.0.98

1 year ago

0.0.99

1 year ago

0.0.142

1 year ago

0.0.141

1 year ago

0.0.140

1 year ago

0.0.146

1 year ago

0.0.145

1 year ago

0.0.144

1 year ago

0.0.143

1 year ago

0.0.95

1 year ago

0.0.90

1 year ago

0.0.91

1 year ago

0.0.92

1 year ago

0.0.93

1 year ago

0.0.94

1 year ago

0.0.88

1 year ago

0.0.89

1 year ago

0.0.84

1 year ago

0.0.85

1 year ago

0.0.86

1 year ago

0.0.87

1 year ago

0.0.83

1 year ago

0.0.82

1 year ago

0.0.80

1 year ago

0.0.81

1 year ago

0.0.79

1 year ago

0.0.77

1 year ago

0.0.78

1 year ago

0.0.76

1 year ago

0.0.75

1 year ago

0.0.74

1 year ago

0.0.73

1 year ago

0.0.72

1 year ago

0.0.71

1 year ago

0.0.70

1 year ago

0.0.66

1 year ago

0.0.67

1 year ago

0.0.68

1 year ago

0.0.69

1 year ago

0.0.64

1 year ago

0.0.65

1 year ago

0.0.63

1 year ago

0.0.62

1 year ago

0.0.60

1 year ago

0.0.61

1 year ago

0.0.59

1 year ago

0.0.53

1 year ago

0.0.54

1 year ago

0.0.55

1 year ago

0.0.56

1 year ago

0.0.57

1 year ago

0.0.58

1 year ago

0.0.51

1 year ago

0.0.52

1 year ago

0.0.50

1 year ago

0.0.49

1 year ago

0.0.46

1 year ago

0.0.47

1 year ago

0.0.2

1 year ago

0.0.48

1 year ago

0.0.40

1 year ago

0.0.41

1 year ago

0.0.42

1 year ago

0.0.43

1 year ago

0.0.45

1 year ago

0.0.37

1 year ago

0.0.38

1 year ago

0.0.39

1 year ago

0.0.36

1 year ago

0.0.35

1 year ago

0.0.32

1 year ago

0.0.33

1 year ago

0.0.34

1 year ago

0.0.30

1 year ago

0.0.31

1 year ago

0.0.26

1 year ago

0.0.27

1 year ago

0.0.28

1 year ago

0.0.29

1 year ago

0.0.20

1 year ago

0.0.21

1 year ago

0.0.22

1 year ago

0.0.23

1 year ago

0.0.24

1 year ago

0.0.25

1 year ago

0.0.19

1 year ago

0.0.18

1 year ago

0.0.17

1 year ago

0.0.16

1 year ago

0.0.15

1 year ago

0.0.14

1 year ago

0.0.13

1 year ago

0.0.12

1 year ago

0.0.11

1 year ago

0.0.10

1 year ago

0.0.1

1 year ago

0.0.0

1 year ago